.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } @media screen and (max-height: 1024px) { .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @media screen and (max-height: 640px) { .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } /** * CMV: reading typography and data surfaces * Written 19 August 2026. * * WHY * --- * Body copy measured 13px running about 200 characters to the line. Long * arguments about recall wording are the whole product here, and that setting * fought every one of them. This sets a reading size and a reading measure. * * SCOPE * ----- * Everything is scoped to .page-content, which is the classic content wrapper * used by the studies, the model pages and the guides. Elementor-built layouts * (the homepage, the directory) have no .page-content and are untouched. */ /* ---------------------------------------------------------------- reading */ .page-content { font-size: 17px; line-height: 1.65; color: var(--ink-2); } .page-content p, .page-content li { font-size: 17px; line-height: 1.65; color: var(--ink-2); } .page-content p { /* auto, not 0, so the measure above can centre the column */ margin: 0 auto 1.15em; } /* * The theme fixes .page-content at min(100%, 1200px) with !important, so rather * than fight the container the prose blocks inside it are given a reading * measure and centred. Tables and stat rows keep the full container width, so * data reads wide and words read narrow. */ .page-content p, .page-content h2, .page-content h3, .page-content h4, .page-content ul, .page-content ol, .page-content blockquote { max-width: 68ch; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- hierarchy */ .page-content h2 { font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--ink); margin: 2.1em auto .55em; } .page-content h3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--ink); margin: 1.7em 0 .45em; } .page-content strong { color: var(--ink); font-weight: 600; } /* ----------------------------------------------------------------- links */ /* * The site already sets prose links to a rose (var(--accent)) that is clearly distinct * from body text and consistent across every page. That is a better answer than * importing a new colour, so only the underline is adjusted here. */ .page-content a { text-underline-offset: 2px; text-decoration-thickness: 1px; } /* ------------------------------------------------------ data as an object */ .page-content table { width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper-2); border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; overflow: hidden; margin: 1.5em 0; } .page-content th, .page-content td { padding: .72em .9em; font-size: 15.5px; line-height: 1.45; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; } .page-content tr:last-child th, .page-content tr:last-child td { border-bottom: 0; } .page-content thead th { background: var(--paper-3); color: var(--ink); font-weight: 600; } /* -------------------------------------------------------- the stat row */ .cmv-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.4em 0 1.6em; } .cmv-stat { flex: 1 1 170px; background: var(--paper-2); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; padding: 16px 18px; } .cmv-stat-n { display: block; font-size: 36px; line-height: 1.05; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .cmv-stat-l { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--muted); } .cmv-stat-hi .cmv-stat-n { color: var(--accent); } /* --------------------------------------------------------------- mobile */ @media (max-width: 600px) { .page-content, .page-content p, .page-content li { font-size: 16.5px; } .page-content h2 { font-size: 25px; } .page-content h3 { font-size: 19px; } .page-content th, .page-content td { padding: .6em .7em; font-size: 14.5px; } .cmv-stat-n { font-size: 30px; } } /* ------------------------------------------- the decorative tip overlay */ /* * #cm-daily floated a "tip of the day" over the homepage statistics within a * second of arrival. The freshness notice at the foot of the page is a * different thing and stays: it is telling the reader something true about * whether they are looking at a cached copy. */ #cm-daily { display: none !important; } /* CM: content layout. ONE centred column, 1200px. Rewritten 5 Aug 2026. This snippet is now the ONLY content-width rule on the site. The duplicate "CM WIDE LAYOUT" rule in the WPCode global footer field, which asked for 1400px and 1560px on body main.site-main and on boxed Elementor containers, was removed on 5 Aug 2026. It had never won above 1240px because of the !important here, and below 1240px it was moot. Why margin-inline:auto is here: a max-width on its own does not centre anything. Hello Elementor only centres .site-main for bodies WITHOUT an elementor-page- class (theme.css: body:not([class*="elementor-page-"]) .site-main). Every Elementor-built page therefore had a 1200px column pinned to the left of the viewport until 5 Aug 2026. Why the rule is no longer limited to min-width 1240px: Hello Elementor also sets bootstrap-style breakpoint widths on .site-main, .page-content and .page-header (500px from 576, 600px from 768, 800px from 1024). While this snippet only acted above 1240px, a CLASSIC page at 768px rendered a 600px body column inside a 753px header band, so its H1 started at x=96.5 while the same H1 on an ELEMENTOR page started at x=20 and the footer links started at x=20. Measured 5 Aug 2026. One rule now governs every width and both page types. Rule: full-bleed bands are allowed, but every constrained wrapper shares the same centred column and the same 10px gutter, so the header, hero, body and footer content edges line up at every width. */ /* 1. One column width, every viewport. min() keeps it fluid below 1200. */ main.site-main, .page-content, .page-header, .site-header .header-inner, .site-footer .footer-inner, .cm-wrap, .cmw, .cm-data, .cm-container, .cm-banner{ max-width:min(100%,1200px) !important; margin-inline:auto !important; } /* 2. Neutralise the theme's explicit breakpoint widths so rule 1 decides. */ main.site-main, .page-content, .page-header, .site-header .header-inner, .site-footer .footer-inner{ width:100% !important; } /* 3. Site gutter below the 1240px band, matching the footer container and the Elementor e-con padding. */ @media (max-width:1239px){ main.site-main{padding-inline:10px !important;} .page-content, .page-header{padding-inline:0 !important;} } /* 4. Elementor containers share the same 1200px band above 1240px. */ @media (min-width:1240px){ .e-con{--container-max-width:1200px !important;} .e-con>.e-con-inner{max-width:min(100%,1200px) !important;margin-inline:auto !important;} .elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px !important;margin-inline:auto !important;} } /* 5. Homepage hero space reservation (5 Aug 2026). The homepage hero heading .cm-h1 renders as one line at first paint and settles at three lines once the web font and the fluid font-size resolve. Everything below it was measured moving down 77px between 120ms and 240ms (.cm-sub top 388 to 465, .cm-cta-row 567 to 644). Settled heights measured on 5 Aug 2026 at eleven viewport widths: 345/360/375/399/430 all settle at 101px, 450 to 690 settle at 67px, then the height is fluid (768 = 81px, 1024 = 108px, 1200 and above = 122px). A single min-height therefore cannot cover the whole range, so the reservation is applied only across the band where the settled height is constant AND the shift was observed, and only on the homepage, so no other page can inherit dead space. */ @media (max-width:449px){ body.home .cm-h1{min-height:101px;} } /* CarsMultiverse: readable light text on non-Elementor content pages (studies, research hub, country EV data) */ body.page:not(.elementor-page) main, body.single:not(.elementor-page) main, body.page:not(.elementor-page) main p, body.single:not(.elementor-page) main p, body.page:not(.elementor-page) main li, body.single:not(.elementor-page) main li, body.page:not(.elementor-page) main td , body.single:not(.elementor-page) main td { color: var(--ink-2); font-size: 17px; line-height: 1.7; } body.page:not(.elementor-page) main h1, body.single:not(.elementor-page) main h1, body.page:not(.elementor-page) main h2, body.single:not(.elementor-page) main h2, body.page:not(.elementor-page) main h3, body.single:not(.elementor-page) main h3, body.page:not(.elementor-page) main strong, body.single:not(.elementor-page) main strong, body.page:not(.elementor-page) main th , body.single:not(.elementor-page) main th { color: var(--ink); } body.page:not(.elementor-page) main h2 , body.single:not(.elementor-page) main h2 { margin-top: 1.6em; } body.page:not(.elementor-page) main em , body.single:not(.elementor-page) main em { color: var(--muted); } body.page:not(.elementor-page) main a , body.single:not(.elementor-page) main a { color: var(--accent); text-decoration: underline; } body.page:not(.elementor-page) main a:hover , body.single:not(.elementor-page) main a:hover { color: var(--ink); } body.page:not(.elementor-page) main table , body.single:not(.elementor-page) main table { border-collapse: collapse; width: 100%; font-size: 15px; } body.page:not(.elementor-page) main th, body.single:not(.elementor-page) main th, body.page:not(.elementor-page) main td , body.single:not(.elementor-page) main td { border-bottom: 1px solid rgba(255,255,255,.14); padding: 10px 12px; text-align: left; } body.page:not(.elementor-page) main thead th , body.single:not(.elementor-page) main thead th { border-bottom: 2px solid rgba(255,255,255,.3); } body.page:not(.elementor-page) main tbody tr:hover , body.single:not(.elementor-page) main tbody tr:hover { background: rgba(255,255,255,.04); } /* single-post override: Elementor kit sets p color with higher specificity on posts */ body.single:not(.elementor-page) main p, body.single:not(.elementor-page) main li, body.single:not(.elementor-page) main td { color: var(--ink-2) !important; } body.single:not(.elementor-page) main strong, body.single:not(.elementor-page) main th { color: var(--ink) !important; } body.single:not(.elementor-page) main a { color: var(--accent) !important; } body.single:not(.elementor-page) main em { color: var(--ink-2) !important; } /* CM RESPONSIVE FIX (25 Jul 2026): CSV download button overflowed 375px viewports (was forced single-line ~474px). */ #cm-csv-btn, button[id="cm-csv-btn"]{max-width:100%;white-space:normal;box-sizing:border-box;line-height:1.45;} @media (max-width:480px){ .page-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} } /* CM NEWSLETTER BUTTON (25 Jul 2026): match house style, replace WPForms default blue */ [data-elementor-id="620"] .wpforms-form button[type=submit]{background:var(--accent);border:0;color:var(--on-accent);font-weight:800;border-radius:10px;padding:14px 28px;width:100%;font-size:1.05em;cursor:pointer;transition:background .15s} [data-elementor-id="620"] .wpforms-form button[type=submit]:hover{background:var(--accent)} [data-elementor-id="620"] .wpforms-form input[type=email]{border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box} [data-elementor-id="620"] .wpforms-form .wpforms-field-label{color:var(--ink-2);font-weight:600} [data-elementor-id="620"] .wpforms-confirmation-container-full{color:var(--ink-2);background:rgba(230,57,70,.08);border:1px solid var(--accent);border-radius:10px;padding:14px 18px} /* WPForms overrides its button via CSS vars/specificity - force both */ [data-elementor-id="620"] .wpforms-container{--wpforms-button-background-color:var(--accent);--wpforms-button-background-color-alt:var(--accent)} [data-elementor-id="620"] .wpforms-form button[type=submit]{background:var(--accent) !important} [data-elementor-id="620"] .wpforms-form button[type=submit]:hover{background:var(--accent) !important} @media (max-width:560px){html .cmv-stack{overflow-x:visible!important}html .cmv-stack:after{content:none!important}html table.cmv-stacked.cmv-stacked{display:block!important;width:100%!important;min-width:0!important}html table.cmv-stacked.cmv-stacked thead{display:none!important}html table.cmv-stacked.cmv-stacked tbody{display:block!important}html table.cmv-stacked.cmv-stacked tbody tr{display:block!important;padding:.6rem 0;border-bottom:1px solid rgba(128,128,128,.32)}html table.cmv-stacked.cmv-stacked tbody tr:last-child{border-bottom:0}html table.cmv-stacked.cmv-stacked tbody td{display:grid!important;grid-template-columns:6.5em 1fr;gap:.55rem;align-items:baseline;padding:.14rem 0;border:0!important;white-space:normal;word-break:break-word}html table.cmv-stacked.cmv-stacked tbody td:before{content:attr(data-label);font-size:12px;line-height:1.3;opacity:.62}html table.cmv-stacked.cmv-stacked tbody td:empty{display:none!important}.cmvhero-lab,.cmvbrowse-lab,.cmvw-eyebrow{font-size:12px}.cmvw-nm small{font-size:12.5px}.cmvlag a>p:first-child{font-size:11.5px}html ul.cmvmod-list{grid-template-columns:1fr!important;padding-left:0!important;list-style:none}html ul.cmvmod-list>li{width:auto!important}html ul.cmvmod-list a{width:auto!important;max-width:100%}.cmvbrowse-row a{min-height:36px;display:inline-flex;align-items:center}html .cmvbrowse-row a:nth-of-type(n+13):not(:last-of-type){display:none}}