/* --------------------------------------------------------------------------- ONE TYPE SCALE ON A PHONE, ACROSS THE SITE. Yin, 2026-08-31, after seeing it on the Validation page: "This font size and line gap is perfect, pls apply it across entire site for mobile version." The scale was not invented. It was measured off Apple and Dyson at 390px: Apple small print 12/16 x1.33, body 14/20 x1.43, lead 17-19/21-23, heading 28/32 x1.14, hero 32/36 x1.12; body left aligned Dyson body 14/20 x1.43, larger body 16/24 x1.50, sub-head 20/28 x1.40, heading 28/36 x1.29, hero 32/40 x1.25; left aligned And the count that started it. Sizes carrying real text on ONE page: Apple iPhone page 4, Dyson purifiers 6, our Validation 8, our Science 7. THE FIVE STEPS caption 12 / 16 x1.33 body 15 / 22 x1.47 lead 19 / 25 x1.32 section 24 / 30 x1.25 title 30 / 36 x1.20 Body left aligned. Display figures keep their own size and get a 1.1 line so they stop touching it. WHY BY ELEMENT AND NOT BY CLASS. I first generated the mapping from every class on every page. It produced eight selectors that landed in two tiers at once and a pile of bare tag names, because the same class is used at different sizes on different pages. Headings by level and body by element covers everything, including markup I did not enumerate; the caption list below is the only place a name is needed. WHY !important. Every page sets its own sizes through its own classes, which a plain element selector cannot beat however late it loads. This file is a deliberate override, which is why it is one file with one job. PHONES ONLY, at the 760px breakpoint the pages already use. Desktop untouched. NOT LOADED BY the landing page or the pollutant decks. Those are full-screen scroll stories whose type is sized to fit one screen at a time; forcing a reading scale into them would break the very layouts just fixed. --------------------------------------------------------------------------- */ @media (max-width: 760px) { /* ---- body -------------------------------------------------------------- */ /* Scoped to body, not main: three pages -- applications, development, air -- have no
at all, so a main-scoped rule left their whole body copy behind. SVG is deliberately untouched; the charts carry their own scale. The [class] / :not([class]) pair is not decoration. Several pages set their body size through a single-class rule that is ALREADY !important -- the applications page runs font-size: var(--chapter-type-size) !important where that token is clamp(14px, 4vw, 17px), which is 15.6px at 390. Between two !important declarations specificity decides, and a plain element selector loses to any class. This pair carries one class-worth of weight, so it wins, and between them they still match every element of that kind. */ body p[class][class], body p:not([class]):not([class]), body li[class][class], body li:not([class]):not([class]), body dd[class][class], body dd:not([class]):not([class]), body dt[class][class], body dt:not([class]):not([class]), body blockquote[class][class], body blockquote:not([class]):not([class]), body figcaption[class][class], body figcaption:not([class]):not([class]), body label[class][class], body label:not([class]):not([class]), body td[class][class], body td:not([class]):not([class]), body th[class][class], body th:not([class]):not([class]), body summary[class][class], body summary:not([class]):not([class]), footer a[class][class], footer a:not([class]):not([class]), .cp-footer-nav a, .cp-footer-social a, .hero__pathways a, .apps-row a, .tackle-row a { font-size: 15px !important; line-height: 22px !important; } body p[class][class], body p:not([class]):not([class]), body li[class][class], body li:not([class]):not([class]), body dd[class][class], body dd:not([class]):not([class]), body blockquote[class][class], body blockquote:not([class]):not([class]) { text-align: left !important; } /* ---- headings ---------------------------------------------------------- */ body h1[class][class], body h1:not([class]):not([class]) { font-size: 30px !important; line-height: 36px !important; } body h2[class][class], body h2:not([class]):not([class]) { font-size: 24px !important; line-height: 30px !important; } body h3[class][class], body h3:not([class]):not([class]) { font-size: 19px !important; line-height: 25px !important; } body h4[class][class], body h4:not([class]):not([class]), body h5[class][class], body h5:not([class]):not([class]), body h6[class][class], body h6:not([class]):not([class]) { font-size: 15px !important; line-height: 22px !important; } /* ---- caption: the small tracked labels, and the fine print -------------- These carry [class][class] of their own. Without it the BODY rule above, which needs two classes' worth of weight to beat the pages' own !important rules, was outranking this one: the newsletter fine print stayed at 15px because body p[class][class] beat .cp-news-legal. My own rule fighting my own rule. */ /* The weight goes on the CLASS, never on a trailing bare tag. Appending it to the tag turned ".dn-specimen span" into ".dn-specimen span[class][class]", which matches nothing, because those spans have no class -- and the specimen captions and the product index label silently stayed off the scale. */ .eyebrow[class][class], .cp-legal-eyebrow[class][class], .cp-contact-eyebrow[class][class], .chapter__eyebrow[class][class], .v23-chapter__eyebrow[class][class], .cp-legal-aside__label[class][class], .cp-legal-aside__contact[class][class], .cp-legal-hero__meta[class][class], .tn-when[class][class], .tn-spec-label[class][class], .tn-scroll[class][class], .tn-stat[class][class] span, .tn-sources[class][class] p, .dn-mono[class][class], .af-partners__label[class][class], .af-product__cat[class][class], .af-steps[class][class] dt, .dn-specimen[class][class] span, .dn-specimen-cap[class][class], .status[class][class], .status--development[class][class], .cp-contact-hint[class][class], .cp-contact-note[class][class] span, .cp-contact-form-head[class][class] span, .cp-footer-bottom[class][class] p, .cp-footer-legal[class][class] a, .cp-footer-top-link[class][class], .cp-news-legal[class][class], .cp-news-legal[class][class] a, .cp-consent-check[class][class] span, .legal[class][class], .legal[class][class] p, .legal[class][class] a, .source[class][class], .tn-skip[class][class], .back-link[class][class], .skip-link[class][class], .cp-skip-link[class][class], .dn-skip[class][class], .application-card__link[class][class], .text-link[class][class], .button[class][class], .product-index[class][class] span, .cp-legal-skip[class][class] { font-size: 12px !important; line-height: 16px !important; } /* ---- a caption-sized link is still a thumb-sized target ---------------- Putting these in the caption tier shrank their boxes with their type: "Learn more" fell to 24px, "Discuss an application" to 26px and "Back" to 36px, all under the 44px a thumb needs. The type stays at 12; the BOX comes back up. */ .text-link[class][class], .button[class][class], .application-card__link[class][class], .cp-footer-top-link[class][class], .cp-footer-legal[class][class] a, .v23-chapter__more[class][class] a, .back-link[class][class] { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* ---- display figures keep their size, and stop touching their own line --- */ .tn-stat b, .metric b, .metric strong, .stat b, .stat strong { line-height: 1.1 !important; } }