.elementor-kit-21455{--e-global-color-primary:#EA0000;--e-global-color-secondary:#EA0000;--e-global-color-text:#EA0000;--e-global-color-accent:#EA0000;--e-global-color-0d353ee:#FFE655;--e-global-color-0691916:#FC9736;--e-global-color-dbf38fa:#B4C3CB;--e-global-color-95071c9:#1C5FB8;--e-global-color-68e3ccb:#11396F;--e-global-color-434e6b5:#07172C;--e-global-color-f2056db:#90B9EE;--e-global-color-2f9ad13:#D3E3F8;--e-global-color-dbe0ca0:#FFFFFF;--e-global-color-1b62a1d:#000000;--e-global-color-8e07411:#D3E3F8;--e-global-color-bdba5f7:#BDD5F5;--e-global-color-a763c72:#11396F;--e-global-color-eba91de:#0D2E59;--e-global-color-be9e3a8:#07172C;--e-global-color-d7c42b1:#373C43;--e-global-color-7b23f82:#FFFFFF;--e-global-color-2460ed1:#E6E6E6;--e-global-color-2ead44c:#11396F;--e-global-color-38bdb62:#FFEA4D;--e-global-color-c265f1e:#FFF6B2;--e-global-color-f37d6d9:#FFFCE5;--e-global-color-bbb8401:#11396F;--e-global-color-7cbb9e9:#07172C;--e-global-color-066b171:#07172C;--e-global-color-9c018ee:#1C5FB8;--e-global-color-40e7399:#113B72;--e-global-color-c071163:#0D2B54;--e-global-color-0590a90:#FFFFFF;--e-global-color-1b00b1b:#FFFFFF;--e-global-color-8a12552:#F0F0F0;--e-global-color-e2cded5:#FFFFFF;--e-global-color-c54ee20:#F0F0F0;--e-global-color-8918302:#EAEAEA;--e-global-color-791aae4:#11396F;--e-global-color-8999318:#07172C;--e-global-color-8b226b1:#000000;--e-global-color-a5c28f0:#FC9736;--e-global-color-6ccfe77:#FFFFFF;--e-global-color-5a2bfeb:#CBDEF6;--e-global-color-71bbc7f:#1C5FB8;--e-global-color-ee85dd8:#2A81F3;--e-global-color-c1d8e6f:#4D6381;--e-global-color-90a2a28:#1C5FB8;--e-global-typography-secondary-font-family:"montserrat";--e-global-typography-secondary-font-size:clamp(1.6rem, 1.55rem + 0.25vw, 1.8rem);--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:clamp(2.4rem, 2.325rem + 0.375vw, 2.7rem);--e-global-typography-text-font-family:"montserrat";--e-global-typography-text-font-size:1.6rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:2.4rem;--e-global-typography-accent-font-family:"montserrat";--e-global-typography-accent-font-size:clamp(1.4rem, 1.375rem + 0.125vw, 1.4rem);--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:clamp(2.1rem, 2.0625rem + 0.1875vw, 2.1rem);--e-global-typography-primary-font-family:"montserrat";--e-global-typography-primary-font-size:clamp(3.2rem, 2.35rem + 4.25vw, 6.8rem);--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:clamp(3.36rem, 2.55rem + 4.05vw, 7.82rem);--e-global-typography-bc8431b-font-size:clamp(2.4rem, 1.89rem + 2.55vw, 4.8rem);--e-global-typography-bc8431b-line-height:clamp(2.64rem, 2.18rem + 2.3vw, 7.2rem);--e-global-typography-b22c481-font-size:clamp(2rem, 1.57rem + 2.15vw, 4rem);--e-global-typography-b22c481-line-height:clamp(2.2rem, 1.84rem + 1.8vw, 6rem);--e-global-typography-c13e8b1-font-size:clamp(1.8rem, 1.46rem + 1.7vw, 3.2rem);--e-global-typography-c13e8b1-line-height:clamp(1.98rem, 1.7rem + 1.4vw, 4.8rem);--e-global-typography-b4bea38-font-size:clamp(1.8rem, 1.63rem + 0.85vw, 2.4rem);--e-global-typography-b4bea38-line-height:clamp(1.98rem, 1.7rem + 1.4vw, 4.8rem);--e-global-typography-91eedbc-font-size:clamp(1.8rem, 1.57rem + 1.15vw, 2rem);--e-global-typography-91eedbc-line-height:clamp(1.98rem, 1.78rem + 1vw, 3rem);--e-global-typography-c67453c-font-size:clamp(1.8rem, 1.62rem + 0.9vw, 1.6rem);--e-global-typography-c67453c-line-height:clamp(1.98rem, 1.82rem + 0.8vw, 2.4rem);--e-global-typography-9438fe6-font-size:clamp(1.6rem, 1.55rem + 0.25vw, 1.8rem);--e-global-typography-9438fe6-line-height:clamp(2.4rem, 2.325rem + 0.375vw, 2.7rem);--e-global-typography-7a87441-font-size:1.6rem;--e-global-typography-7a87441-font-weight:600;--e-global-typography-7a87441-line-height:2.4rem;--e-global-typography-e2b301e-font-size:1.6rem;--e-global-typography-e2b301e-line-height:2.4rem;--e-global-typography-209e458-font-size:1.6rem;--e-global-typography-209e458-font-weight:400;--e-global-typography-209e458-text-decoration:underline;--e-global-typography-209e458-line-height:2.4rem;--e-global-typography-2eff07f-font-size:clamp(1.4rem, 1.375rem + 0.125vw, 1.4rem);--e-global-typography-2eff07f-font-weight:300;--e-global-typography-2eff07f-text-decoration:underline;--e-global-typography-2eff07f-line-height:clamp(2.1rem, 2.0625rem + 0.1875vw, 2.1rem);--e-global-typography-6b8a2b5-font-size:clamp(1.6rem, 1.55rem + 0.25vw, 1.8rem);--e-global-typography-6b8a2b5-text-decoration:underline;--e-global-typography-6b8a2b5-line-height:clamp(2.4rem, 2.325rem + 0.375vw, 2.7rem);color:var( --e-global-color-be9e3a8 );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-21455 e-page-transition{background-color:#FFBC7D;}.elementor-kit-21455 a{color:var( --e-global-color-71bbc7f );}.elementor-kit-21455 a:hover{color:var( --e-global-color-ee85dd8 );}.elementor-kit-21455 h1{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-bc8431b-font-size );line-height:var( --e-global-typography-bc8431b-line-height );}.elementor-kit-21455 h2{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-b22c481-font-size );line-height:var( --e-global-typography-b22c481-line-height );}.elementor-kit-21455 h3{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-c13e8b1-font-size );line-height:var( --e-global-typography-c13e8b1-line-height );}.elementor-kit-21455 h4{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-b4bea38-font-size );line-height:var( --e-global-typography-b4bea38-line-height );}.elementor-kit-21455 h5{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-91eedbc-font-size );line-height:var( --e-global-typography-91eedbc-line-height );}.elementor-kit-21455 h6{color:var( --e-global-color-be9e3a8 );font-size:var( --e-global-typography-c67453c-font-size );line-height:var( --e-global-typography-c67453c-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-21455{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-21455 h1{font-size:var( --e-global-typography-bc8431b-font-size );line-height:var( --e-global-typography-bc8431b-line-height );}.elementor-kit-21455 h2{font-size:var( --e-global-typography-b22c481-font-size );line-height:var( --e-global-typography-b22c481-line-height );}.elementor-kit-21455 h3{font-size:var( --e-global-typography-c13e8b1-font-size );line-height:var( --e-global-typography-c13e8b1-line-height );}.elementor-kit-21455 h4{font-size:var( --e-global-typography-b4bea38-font-size );line-height:var( --e-global-typography-b4bea38-line-height );}.elementor-kit-21455 h5{font-size:var( --e-global-typography-91eedbc-font-size );line-height:var( --e-global-typography-91eedbc-line-height );}.elementor-kit-21455 h6{font-size:var( --e-global-typography-c67453c-font-size );line-height:var( --e-global-typography-c67453c-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-21455{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-21455 h1{font-size:var( --e-global-typography-bc8431b-font-size );line-height:var( --e-global-typography-bc8431b-line-height );}.elementor-kit-21455 h2{font-size:var( --e-global-typography-b22c481-font-size );line-height:var( --e-global-typography-b22c481-line-height );}.elementor-kit-21455 h3{font-size:var( --e-global-typography-c13e8b1-font-size );line-height:var( --e-global-typography-c13e8b1-line-height );}.elementor-kit-21455 h4{font-size:var( --e-global-typography-b4bea38-font-size );line-height:var( --e-global-typography-b4bea38-line-height );}.elementor-kit-21455 h5{font-size:var( --e-global-typography-91eedbc-font-size );line-height:var( --e-global-typography-91eedbc-line-height );}.elementor-kit-21455 h6{font-size:var( --e-global-typography-c67453c-font-size );line-height:var( --e-global-typography-c67453c-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*html body .elementor-widget-text-editor ul, html body .elementor-widget-text-editor li { text-decoration: none !important; } */ /* Neutralise le hover sur tous les li parents */ html body .elementor-widget-text-editor ul:hover a, html body .elementor-widget-text-editor li:hover a { color: var(--e-global-color-71bbc7f) !important; -webkit-text-fill-color: var(--e-global-color-71bbc7f) !important; text-decoration: none !important; } /* Réapplique uniquement sur le lien directement hovered */ html body .elementor-widget-text-editor li a:hover { color: var(--e-global-color-ee85dd8) !important; -webkit-text-fill-color: var(--e-global-color-ee85dd8) !important; } html body .elementor-widget-text-editor li a::selection { color: var(--e-global-color-ee85dd8); -webkit-text-fill-color: initial; background-color: #b3d4ff; } /* =================================================================== Layout and contents nav =================================================================== */ .hli-layout { display: flex; align-items: flex-start; gap: 40px; } /* 1140px container - 250px nav - 40px gap leaves 850px, so cap the text column to match the 800px used elsewhere on the site */ .hli-content { flex: 1; min-width: 0; max-width: 800px; } /* position:sticky is cancelled by any ancestor whose overflow is not visible, and themes set overflow-x:hidden constantly. overflow-x:clip stops sideways scrolling without creating a scroll container, so sticky survives. The JS does the same walk for deeper ancestors. */ html:has(.hli-nav), body:has(.hli-nav) { overflow-x: clip; } :has(> .hli-layout), :has(> * > .hli-layout), :has(> * > * > .hli-layout) { overflow: visible; } /* stop jumped-to headings hiding under the sticky site header */ .hli-content h2, .hli-content h3, .hli-content h4 { scroll-margin-top: 120px; } /* --- the nav shell ------------------------------------------------- Sticky column. The scroll sits on .hli-nav-inner rather than here, so anything added above the list would stay put while the links scroll. min-height:0 on the inner list is what lets a flex child scroll. */ .hli-nav { width: 250px; flex-shrink: 0; position: sticky; top: 120px; max-height: calc(100vh - 120px - 40px); display: flex; flex-direction: column; } .hli-nav-inner { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; padding-right: 6px; border-left: 3px solid var(--e-global-color-2f9ad13); /* Blue--ultra-light rail */ scrollbar-width: thin; scrollbar-color: var(--e-global-color-bdba5f7) transparent; } .hli-nav-inner::-webkit-scrollbar { width: 6px; } .hli-nav-inner::-webkit-scrollbar-track { background: transparent; } .hli-nav-inner::-webkit-scrollbar-thumb { background: var(--e-global-color-bdba5f7); } /* --- the links ----------------------------------------------------- The transparent left border is the indicator: it fills in on hover and when active, so nothing shifts position. Square corners throughout. */ .hli-nav-link { display: block; padding: 8px 12px; margin-left: -3px; /* sit the border over the rail */ border-left: 3px solid transparent; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); line-height: 1.35; color: var(--e-global-color-71bbc7f); /* Links--dark */ text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* Same-page anchors count as visited once clicked, and the theme paints visited and focused links in Focus orange, so both states are claimed here or previously clicked entries turn orange. */ .hli-nav-link:visited { color: var(--e-global-color-71bbc7f); } .hli-nav-link:focus { color: var(--e-global-color-ee85dd8); background: var(--e-global-color-2f9ad13); outline: none; } /* keyboard users still get a visible ring */ .hli-nav-link:focus-visible { outline: 2px solid var(--e-global-color-a5c28f0); outline-offset: -2px; } .hli-nav-link:hover, .hli-nav-link:visited:hover { background: var(--e-global-color-2f9ad13); color: var(--e-global-color-ee85dd8); /* Links--dark__hover */ border-left-color: var(--e-global-color-f2056db); text-decoration: none; } /* the section currently being read, set by the script */ .hli-nav-link.is-active, .hli-nav-link:visited.is-active { background: var(--e-global-color-2f9ad13); color: var(--e-global-color-68e3ccb); /* Blue--dark */ font-weight: 600; border-left-color: var(--e-global-color-95071c9); } /* parent of the active subsection */ .hli-nav-link.is-parent-active { color: var(--e-global-color-68e3ccb); } /* --- collapsible groups -------------------------------------------- A top-level link plus a chevron button. Groups without subsections are a bare link with no button. */ .hli-nav-group { display: flex; flex-direction: column; } .hli-nav-row { display: flex; align-items: stretch; } .hli-nav-row > .hli-nav-link { flex: 1; min-width: 0; } .hli-nav-toggle { flex-shrink: 0; width: 30px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--e-global-color-71bbc7f); display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .hli-nav-toggle:hover { background: var(--e-global-color-2f9ad13); color: var(--e-global-color-95071c9); } /* chevron drawn from two borders, rotated; flips when the group opens */ .hli-nav-toggle::before { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s ease; } .hli-nav-toggle[aria-expanded="true"]::before { margin-top: 3px; transform: rotate(45deg); } /* 0fr to 1fr animates to the content's own height, so no max-height guess is needed. The inner div is what the grid row measures. */ .hli-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; } .hli-nav-group.is-open > .hli-nav-sub { grid-template-rows: 1fr; } .hli-nav-sub > div { overflow: hidden; display: flex; flex-direction: column; } .hli-nav-sublink { padding-left: 26px; font-size: 1.3rem; color: var(--e-global-color-71bbc7f); } /* --- mobile: unpin, but keep it a compact scrolling box ------------- align-items has to go back to stretch here. Once the flex direction is column it governs the width, not the vertical position, and flex-start sizes .hli-content to its content up to its 800px max-width: 800px of text on a 380px phone, clipped rather than scrollable because html carries overflow-x:clip for the sticky nav. */ @media (max-width: 900px) { .hli-layout { flex-direction: column; gap: 24px; align-items: stretch; } .hli-content { width: 100%; max-width: 100%; } /* No horizontal padding here on purpose. The column the report sits in already carries the site's 15px at this width, and adding our own on top of it was what made the margins twice as wide as the rest of the site. One padding, owned by the page, not by this stylesheet. */ .hli-nav { width: 100%; position: static; max-height: none; padding: 16px; background: var(--e-global-color-8a12552); } .hli-nav-inner { max-height: 40vh; } } /* =================================================================== Report typography, mapped to the Elementor kit Kit colours: 71bbc7f Links--dark, ee85dd8 Links--dark__hover, 95071c9 Blue--base, 68e3ccb Blue--dark, be9e3a8 body--dark. The four system colours are all #EA0000 on this site, so anything turning red means a variable name is wrong. =================================================================== */ /* body copy */ .hli-content, .hli-content p, .hli-content li, .hli-content td, .hli-content th { font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--hli-body); font-weight: var(--e-global-typography-text-font-weight); line-height: 1.5; color: var(--e-global-color-be9e3a8); } /* The export carries its own paragraph padding, which lands on top of the theme's margins and doubles every gap. Let the theme own the rhythm. */ .hli-content p { padding-top: 0; padding-bottom: 0; } .hli-content li { padding-top: 0; padding-bottom: 0; margin-bottom: 0.8rem; } .hli-content ul, .hli-content ol { margin-top: 0; } /* without this the theme's paragraph margin inflates every table row */ .hli-content td p, .hli-content th p { margin: 0; padding: 0; } /* justified text in a narrow cell opens ugly rivers, so left-align it. The export's own alignment classes are more specific, so a cell the document centred stays centred. */ .hli-content td p, .hli-content th p { text-align: left; } /* separate stacked paragraphs in a cell. :not(:last-child) means a cell with a single paragraph gets nothing, so row heights stay tight. */ .hli-content td p:not(:last-child), .hli-content th p:not(:last-child) { padding-bottom: 0.7em; } /* Headings are shifted down one level on conversion, so a document h1 arrives here as an h2 and the page title stays the only h1. The kit sizes (1rem = 10px on this site) are: h2 clamp(2rem, 1.57rem + 2.15vw, 4rem) 20 -> 40px h3 clamp(1.8rem, 1.46rem + 1.7vw, 3.2rem) 18 -> 32px h4 clamp(1.8rem, 1.63rem + 0.85vw, 2.4rem) 18 -> 24px They are set for a landing page, where an h2 is a section banner seen one or two to a screen. A report has one every few paragraphs, so the ceiling comes down while the phone-width floor stays put: multiplying the whole clamp would drag 20px down to 16px and make an h2 the same size as body text on a phone. Four numbers, in one place. Raise the third value of each clamp to go back towards the kit. */ .hli-content { --hli-h2: clamp(2rem, 1.58rem + 1.13vw, 3.2rem); /* 20 -> 32px */ --hli-h3: clamp(1.8rem, 1.52rem + 0.75vw, 2.6rem); /* 18 -> 26px */ --hli-h4: clamp(1.7rem, 1.56rem + 0.38vw, 2.1rem); /* 17 -> 21px */ --hli-h5: var(--hli-body); /* body size, bold */ /* The kit's text size is a flat 1.6rem, but the site's pages override it to 14px on a phone, so the report was reading two points larger than everything around it. This tracks the site: 14px up to 390px, 16px from 768px up. line-height goes with it as a ratio of 1.5, which keeps the 21px/24px the site uses at either end rather than the kit's fixed 2.4rem (1.71 on 14px text, far too airy). */ --hli-body: clamp(1.4rem, 1.19rem + 0.53vw, 1.6rem); /* 14 -> 16px */ } .hli-content h2, .hli-content h3, .hli-content h4, .hli-content h5, .hli-content h6 { font-family: var(--e-global-typography-primary-font-family), Sans-serif; font-weight: var(--e-global-typography-primary-font-weight); } /* The kit line-heights are generous for a banner (6rem on a 4rem h2) and too loose once the type is smaller, so they are set as ratios here. */ .hli-content h2 { font-size: var(--hli-h2); line-height: 1.25; color: var(--e-global-color-95071c9); /* Blue--base */ } .hli-content h3 { font-size: var(--hli-h3); line-height: 1.3; color: var(--e-global-color-68e3ccb); /* Blue--dark */ } .hli-content h4 { font-size: var(--hli-h4); line-height: 1.35; color: var(--e-global-color-be9e3a8); /* body--dark */ } /* h5 and h6 had no rules, so a document that goes that deep (the charity subsections in the giving season report) fell through to the kit, where h5 is 18-20px and h6 is a broken clamp that always resolves to 18px: both larger than the h4 above them at phone width. */ .hli-content h5, .hli-content h6 { font-size: var(--hli-h5); line-height: 1.4; font-weight: 700; color: var(--e-global-color-be9e3a8); } /* Justified body text is never wanted here: a narrow column plus long citations opens rivers of white space between words. New conversions have it rewritten to left in master.py, so this is the safety net for reports already published with the Doc's alignment. Paragraphs and list items only, so a deliberately centred caption or a right-aligned table number is left alone. */ .hli-content p, .hli-content li { text-align: left; } /* links: Links--medium on Links--dark */ .hli-content a, .hli-content a:visited { color: var(--e-global-color-71bbc7f); font-weight: var(--e-global-typography-209e458-font-weight); text-decoration: var(--e-global-typography-209e458-text-decoration, underline); } .hli-content a:hover { color: var(--e-global-color-ee85dd8); } /* A wide table (Table 1 in the living review has 13 columns, with explicit pt widths from the export) cannot fit an 800px column. Rather than shrink it into unreadability, let it scroll sideways inside the text column. */ .hli-table-wrap { overflow-x: auto; margin: 24px 0; scrollbar-width: thin; scrollbar-color: var(--e-global-color-bdba5f7) transparent; } .hli-table-wrap::-webkit-scrollbar { height: 8px; } .hli-table-wrap::-webkit-scrollbar-track { background: transparent; } .hli-table-wrap::-webkit-scrollbar-thumb { background: var(--e-global-color-bdba5f7); } .hli-content table { border-collapse: collapse; } /* Google gives some tables a negative left margin, because in the document they stick out into the page margin. Inside the scroller that margin is clipped rather than scrollable (a scrollbar only reaches rightward overflow), which cut the left edge off the boxed callouts. No class names here: the .elementor-kit-21455 matches whatever the export happens to number them. */ .hli-content .hli-table-wrap > table { margin-left: 0; margin-right: auto; } /* The export often sets a cell padding of 0.6pt, under a pixel, so columns run into each other. This floor applies whatever the export asked for, since .hli-content td outranks the export's single-class rules. */ .hli-content td, .hli-content th { padding: 8px 10px; } /* tables sit a step below body copy */ .hli-content table td, .hli-content table th { font-size: var(--e-global-typography-accent-font-size); line-height: var(--e-global-typography-accent-line-height); } /* No class-name .elementor-kit-21455s here: Google regenerates .cNN numbers on every export, so hardcoding one paints whatever that class happens to be next time. Header shading comes from the export's own cell styling. */ .hli-content table th { background-color: var(--e-global-color-8918302); } /* Footnote markers only: small, bold, no underline. The footnote text itself, in the tooltip and in the list at the foot of the page, is untouched. Two sets of .elementor-kit-21455s because the marker markup depends on the footnote plugin: check the class in DevTools if this does not take. */ .hli-content sup, .hli-content sup a, .hli-content .easy-footnote, .hli-content .easy-footnote a { font-size: var(--e-global-typography-2eff07f-font-size); font-weight: 700; text-decoration: none; } /* =================================================================== Accordions: the appendices block at the end of a report, and any section collapsed by accordions.json. The summary is a bar, not a heading: tinted panel with a blue rail and a Show/Hide label beside the chevron, so it reads as a control. The open body continues the rail one shade lighter, so the contents look contained by the bar rather than like the report carrying on. Both class names are styled, because reports already published carry only .hli-appendices-*; nothing on the site needs re-pasting. Opening animates via ::details-content, which is Chromium-only for now (interpolate-size has not shipped in Firefox or Safari). There it snaps open, which is what it did before, so nothing breaks. =================================================================== */ :is(.hli-appendices, .hli-accordion) { interpolate-size: allow-keywords; /* lets the animation reach auto */ } .hli-appendices { margin: 48px 0 0; } /* closes the report */ .hli-accordion { margin: 24px 0; } /* sits inside it */ /* --- the bar ------------------------------------------------------- */ :is(.hli-appendices-summary, .hli-accordion-summary) { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--e-global-color-8a12552); /* #F0F0F0 */ border-left: 4px solid var(--e-global-color-95071c9); /* Blue--base */ cursor: pointer; list-style: none; /* Firefox marker */ transition: background 0.15s ease; } :is(.hli-appendices-summary, .hli-accordion-summary)::-webkit-details-marker { display: none; } :is(.hli-appendices-summary, .hli-accordion-summary):hover, :is(.hli-appendices, .hli-accordion)[open] > :is(.hli-appendices-summary, .hli-accordion-summary) { background: var(--e-global-color-2f9ad13); /* Blue--ultra-light */ } :is(.hli-appendices-summary, .hli-accordion-summary):focus-visible { outline: 2px solid var(--e-global-color-a5c28f0); outline-offset: -2px; } /* h4 scale whatever the line's level in the document, so every bar looks the same and none of them shouts over the sections inside. The span rule is for a bar built from a paragraph, where Google puts the font size on the span rather than the

. */ .hli-content :is(.hli-appendices-summary, .hli-accordion-summary) :is(h1, h2, h3, h4, h5, h6, p), .hli-content :is(.hli-appendices-summary, .hli-accordion-summary) p span { margin: 0; font-size: var(--hli-h4); line-height: 1.2; font-weight: 600; color: var(--e-global-color-68e3ccb); /* Blue--dark */ } /* Show/Hide label. order pushes both pseudo-elements to the right-hand end, with the label before the chevron. */ :is(.hli-appendices-summary, .hli-accordion-summary)::before { content: "Show"; order: 1; margin-left: auto; padding-left: 12px; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-global-color-c1d8e6f); /* #4D6381 */ } :is(.hli-appendices, .hli-accordion)[open] > :is(.hli-appendices-summary, .hli-accordion-summary)::before { content: "Hide"; } :is(.hli-appendices-summary, .hli-accordion-summary)::after { content: ""; order: 2; flex-shrink: 0; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--e-global-color-95071c9); border-bottom: 2px solid var(--e-global-color-95071c9); transform: rotate(45deg); transition: transform 0.25s ease; } :is(.hli-appendices, .hli-accordion)[open] > :is(.hli-appendices-summary, .hli-accordion-summary)::after { margin-top: 4px; transform: rotate(-135deg); } /* --- the body ------------------------------------------------------ */ :is(.hli-appendices-body, .hli-accordion-body) { padding: 20px 0 8px 20px; border-left: 4px solid var(--e-global-color-2f9ad13); } :is(.hli-appendices-body, .hli-accordion-body) > *:first-child { margin-top: 0; } /* height 0 -> auto, plus the discrete step that keeps the content rendered for the duration of the close */ :is(.hli-appendices, .hli-accordion)::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; } :is(.hli-appendices, .hli-accordion)[open]::details-content { block-size: auto; } @media (prefers-reduced-motion: reduce) { :is(.hli-appendices, .hli-accordion)::details-content { transition: none; } :is(.hli-appendices-summary, .hli-accordion-summary)::after { transition: none; } } @media (max-width: 600px) { :is(.hli-appendices-summary, .hli-accordion-summary) { padding: 14px; gap: 8px; } :is(.hli-appendices-summary, .hli-accordion-summary)::before { display: none; /* chevron is enough */ } :is(.hli-appendices-body, .hli-accordion-body) { padding-left: 12px; } } /* a browser printout should include everything, even though the published PDF comes from the document itself */ @media print { :is(.hli-appendices, .hli-accordion) > *:not(summary) { display: block !important; } :is(.hli-appendices, .hli-accordion)::details-content { block-size: auto; } :is(.hli-appendices-summary, .hli-accordion-summary)::before, :is(.hli-appendices-summary, .hli-accordion-summary)::after { display: none; } } /* =================================================================== Updates box at the top of a report, built from updates.md =================================================================== */ /* the container holds the label and one card per update */ .hli-updates { margin: 0 0 40px; } .hli-updates-title { margin: 0 0 12px; font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-global-color-c1d8e6f); /* Tab-bg__inactive, #4D6381 */ } /* one card per update, stacked in the order written */ .hli-update { background: var(--e-global-color-8a12552); /* Btn-white--bg__hover, #F0F0F0 */ padding: 24px 28px; margin-bottom: 16px; } .hli-update:last-child { margin-bottom: 0; } /* headings inside a card sit a step below the report's own h2 */ .hli-update h2, .hli-update h3 { margin: 0 0 8px; font-family: var(--e-global-typography-primary-font-family), Sans-serif; font-size: var(--e-global-typography-b4bea38-font-size); line-height: var(--e-global-typography-b4bea38-line-height); font-weight: 600; color: var(--e-global-color-be9e3a8); /* body--dark */ } .hli-update p { margin: 0 0 12px; } .hli-update ul, .hli-update ol { margin: 0 0 12px; padding-left: 20px; } .hli-update li { margin-bottom: 4px; } .hli-update > *:last-child { margin-bottom: 0; } /* =================================================================== Buttons inserted by buttons.json "style": "primary" -> blue, the default report button "style": "secondary" -> yellow "style": "white" -> white The kit's own naming runs the other way round: the blue below is Btn-secondary--* in Site Settings, the yellow is Btn-primary--*. Each colour is aliased once here, so a change is one line and the rules underneath stay untouched. Shape and type match the site's own buttons (40px radius, 15px 22px padding, 19px/600), so these sit alongside a real Elementor button without looking different. =================================================================== */ .hli-content { /* primary button = blue = kit Btn-secondary--* */ --hli-btn-primary-bg: var(--e-global-color-9c018ee); --hli-btn-primary-bg-hover: var(--e-global-color-40e7399); --hli-btn-primary-text: var(--e-global-color-0590a90); --hli-btn-primary-text-hover: var(--e-global-color-1b00b1b); /* secondary button = yellow = kit Btn-primary--* */ --hli-btn-secondary-bg: var(--e-global-color-38bdb62); --hli-btn-secondary-bg-hover: var(--e-global-color-c265f1e); --hli-btn-secondary-text: var(--e-global-color-bbb8401); --hli-btn-secondary-text-hover: var(--e-global-color-7cbb9e9); /* white button = kit Btn-white--* */ --hli-btn-white-bg: var(--e-global-color-6ccfe77); --hli-btn-white-bg-hover: var(--e-global-color-8a12552); --hli-btn-white-text: var(--e-global-color-791aae4); --hli-btn-white-text-hover: var(--e-global-color-8999318); --hli-btn-radius: 40px; --hli-btn-weight: 600; } /* the wrapper is a block, so text-align centres the inline-block inside */ .hli-button { margin: 24px 0; text-align: center; } .hli-btn { display: inline-block; padding: 15px 22px; border: 0; border-radius: var(--hli-btn-radius); font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: 19px; font-weight: var(--hli-btn-weight); line-height: 20px; cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } /* the general link rule would otherwise underline and recolour these */ .hli-content .hli-btn, .hli-content .hli-btn:visited, .hli-content .hli-btn:hover, .hli-content .hli-btn:focus { text-decoration: none; font-weight: var(--hli-btn-weight); } .hli-content .hli-btn--primary, .hli-content .hli-btn--primary:visited { background: var(--hli-btn-primary-bg); color: var(--hli-btn-primary-text); } .hli-content .hli-btn--primary:hover, .hli-content .hli-btn--primary:focus { background: var(--hli-btn-primary-bg-hover); color: var(--hli-btn-primary-text-hover); } .hli-content .hli-btn--secondary, .hli-content .hli-btn--secondary:visited { background: var(--hli-btn-secondary-bg); color: var(--hli-btn-secondary-text); } .hli-content .hli-btn--secondary:hover, .hli-content .hli-btn--secondary:focus { background: var(--hli-btn-secondary-bg-hover); color: var(--hli-btn-secondary-text-hover); } .hli-content .hli-btn--white, .hli-content .hli-btn--white:visited { background: var(--hli-btn-white-bg); color: var(--hli-btn-white-text); } .hli-content .hli-btn--white:hover, .hli-content .hli-btn--white:focus { background: var(--hli-btn-white-bg-hover); color: var(--hli-btn-white-text-hover); }/* End custom CSS */