/* ============================================================ EPIC REFUEL — Scroll Sites Custom CSS Look and feel -> Customize theme -> Code () -> Custom CSS THIS FILE IS THE WHOLE FIELD. Replace the entire box with it; never append. Companion: site-assets/custom-js.js (the intro block). A. Homepage scoped to main.article-overview-page B. Schedule pages scoped by attachment-linking table + page id C. Homepage hero header[data-component="banner"] Background on anything here is in HANDOFF.md, not in these comments. ============================================================ */ /* ============================================================ A. HOMEPAGE ============================================================ */ /* Intro block, injected below the tiles by the Custom JavaScript from the Confluence page "Homepage Intro". div.content is a 3-column grid, so without grid-column the block would sit in one 504px column. */ main.article-overview-page .refuel-intro { grid-column: 1 / -1; margin: 34px 0 0; padding: 26px 30px; background: #f6f9fc; border: 1px solid #e2e7ee; border-left: 4px solid #0093D0; border-radius: 14px; } /* Images keep the size set in Confluence - no upscaling. */ main.article-overview-page .refuel-intro .theme-block-image { display: flex; justify-content: center; } main.article-overview-page .refuel-intro .block-image { margin-left: auto; margin-right: auto; } main.article-overview-page .refuel-intro > *:first-child { margin-top: 0; } main.article-overview-page .refuel-intro > *:last-child { margin-bottom: 0; } main.article-overview-page .refuel-intro h1, main.article-overview-page .refuel-intro h2, main.article-overview-page .refuel-intro h3 { color: #0C2340; margin: 0 0 10px; font-size: 22px; } main.article-overview-page .refuel-intro p, main.article-overview-page .refuel-intro li { color: #44515e; line-height: 1.6; font-size: 15px; } main.article-overview-page .refuel-intro ul { margin: 10px 0 0; padding-left: 20px; } main.article-overview-page .refuel-intro li { margin: 4px 0; } main.article-overview-page .refuel-intro img { max-width: 100%; height: auto; border-radius: 8px; } /* ---- Which pages the site offers ------------------------------------- Tiles are automatic, one per CHILD PAGE of the homepage. Five are hidden here so tiles, nav and menus all show the same four. The pages stay published and still work from a direct link. TO RESTORE ONE: comment out its line in both groups below. The icon rules further down are left in place for all of them. Homepage Intro feeds the intro block, so it must never be a tile. */ main.article-overview-page section.pages ul.items > li:has(a[href$="/homepage-intro"]) { display: none; } main.article-overview-page section.pages ul.items > li:has(a[href$="/accomplishments"]) { display: none; } main.article-overview-page section.pages ul.items > li:has(a[href$="/change-management"]) { display: none; } main.article-overview-page section.pages ul.items > li:has(a[href$="/contacts"]) { display: none; } main.article-overview-page section.pages ul.items > li:has(a[href$="/newsletters"]) { display: none; } /* The same four in the menus. Three menus exist: the desktop sidebar (nav#navigator-nav) and the phone drawer (nav#drawer-nav) are both , so one rule covers them; div.drawer-links is the hand-maintained Sections list and is deliberately untouched. On the homepage the tree duplicates that Sections list, so it goes entirely. Elsewhere it stays - on a day page it is the only way a phone reaches Day 2, Day 3 and Download calendars. */ body:has(main.article-overview-page) dialog.drawer nav#drawer-nav { display: none; } theme-page-tree li.tree-item:has(> .tree-item-header > a[href$="/accomplishments"]), theme-page-tree li.tree-item:has(> .tree-item-header > a[href$="/change-management"]), theme-page-tree li.tree-item:has(> .tree-item-header > a[href$="/contacts"]), theme-page-tree li.tree-item:has(> .tree-item-header > a[href$="/newsletters"]), theme-page-tree li.tree-item:has(> .tree-item-header > a[href$="/homepage-intro"]) { display: none; } /* Width. The theme locks div.content to 1024px, which is what creates the large empty margins. 92vw keeps a margin on smaller screens. */ main.article-overview-page div.content { width: min(1560px, 92vw) !important; max-width: none !important; margin-left: auto; margin-right: auto; } /* ---- Card grid ---- */ main.article-overview-page section.pages { max-width: none; margin: 0 auto; } main.article-overview-page section.pages ul.items { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1000px) { main.article-overview-page section.pages ul.items { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { main.article-overview-page section.pages ul.items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { main.article-overview-page section.pages ul.items { grid-template-columns: 1fr; } } main.article-overview-page section.pages ul.items > li { position: relative; background: #fff; border: 1px solid #e2e7ee; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(12,35,64,.06), 0 6px 18px rgba(12,35,64,.08); transition: transform .15s, box-shadow .15s; margin: 0; padding: 0; display: flex; flex-direction: column; } main.article-overview-page section.pages ul.items > li:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(12,35,64,.15); } /* Icon header. Default gradient; per-page overrides at the end of section A. */ main.article-overview-page section.pages ul.items > li::before { content: ""; display: flex; align-items: center; justify-content: center; height: 118px; font-size: 42px; color: #fff; background: linear-gradient(135deg, #0093D0, #00b4e0); } /* Title, with the whole card as the click target. */ main.article-overview-page section.pages ul.items > li hgroup { padding: 15px 18px 18px; } main.article-overview-page section.pages ul.items > li h3 { margin: 0; font-size: 17px; } main.article-overview-page section.pages ul.items > li h3 a { color: #0C2340 !important; text-decoration: none; } main.article-overview-page section.pages ul.items > li h3 a::after { content: ""; position: absolute; inset: 0; } /* Description comes from each page's Excerpt macro, not from here. */ main.article-overview-page section.pages ul.items > li hgroup p, main.article-overview-page section.pages ul.items > li hgroup > *:not(h3) { margin: 7px 0 0; font-size: 13.5px; color: #55636f; line-height: 1.5; } /* ---- Per-page icons, keyed by URL slug so card order does not matter. To add one, copy a line and change the slug and the emoji. ---- */ main.article-overview-page section.pages ul.items > li:has(a[href$="/timeline"])::before { content: "\1F570\FE0F"; background: linear-gradient(135deg,#0093D0,#00b4e0); } main.article-overview-page section.pages ul.items > li:has(a[href$="/resources"])::before { content: "\1F393"; background: linear-gradient(135deg,#0072a8,#33aadd); } main.article-overview-page section.pages ul.items > li:has(a[href$="/newsletters"])::before { content: "\1F4F0"; background: linear-gradient(135deg,#0b3b57,#0093D0); } main.article-overview-page section.pages ul.items > li:has(a[href$="/governance"])::before { content: "\2696\FE0F"; background: linear-gradient(135deg,#127fb3,#6fc6e8); } main.article-overview-page section.pages ul.items > li:has(a[href$="/accomplishments"])::before { content: "\2B50"; background: linear-gradient(135deg,#1a6d92,#4fb8dd); } main.article-overview-page section.pages ul.items > li:has(a[href$="/change-management"])::before { content: "\1F504"; background: linear-gradient(135deg,#0C2340,#1f4a6b); } main.article-overview-page section.pages ul.items > li:has(a[href$="/contacts"])::before { content: "\2709"; background: linear-gradient(135deg,#0C2340,#0093D0); } main.article-overview-page section.pages ul.items > li:has(a[href*="assessment-schedule"])::before { content: "\1F5D3\FE0F"; background: linear-gradient(135deg,#0e7c7b,#3AD2D7); } /* ============================================================ B. SCHEDULE PAGES SCOPING, rewritten 2026-09-14. This used to hook on each page's refuel-banner-*.svg. Those images were lost - most likely when the pages were re-pasted from an export, which does not include them - and every rule in this section went inert. Silently: the tables just rendered as plain Confluence tables and the Add links stopped being buttons. The hook is now the PAGE ID, which page content cannot remove. Scroll puts it on every page as : Day 1 44040194 Day 2 44236801 Day 3 44236834 Downloads 43778057 parent 43810819 EVERY SELECTOR IN THIS SECTION USES THE SAME PREFIX SHAPE ON PURPOSE. A content-based hook was tried first - main:has(table a[href*="__attachments"]) - and it worked, but it is (0,1,3) where a page-id prefix is (0,1,1), so it silently outranked the per-day accents below and Day 1 lost its blue tint. The original survived on equal specificity plus source order. Keep it that way: if you add a selector here, give it the same prefix, and let ORDER decide. Day tables have six columns (Time, Session, Epic team, Location, Contact, Add); the parent and downloads tables have three. Anything that would wreck a three-column table is gated on :has(th:nth-child(6)). ============================================================ */ /* ---- Table polish ---- */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table th { background: #EEF3F8; color: #42526E; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 10px 12px; border-bottom: 2px solid #D6DEE7; white-space: nowrap; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table td { padding: 11px 12px; border-bottom: 1px solid #EBECF0; vertical-align: top; } /* Confluence wraps every cell's content in a

that the theme styles, so rules set on the td alone are silently overridden. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table td > p, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table th > p { margin: 0; } /* Zebra and hover, so a row can be tracked across six columns. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table tbody tr:nth-child(even) td { background: #FAFBFC; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table tbody tr:hover td { background: #EEF6FC; } /* ---- Six-column day tables ---- */ /* Time: never wrap, and line the digits up. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(1), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(1) > p { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; font-weight: 600; color: #172B4D; } /* Session is what people scan for, so let it lead. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(2) { font-weight: 600; color: #172B4D; } /* Team, location and contact are supporting detail. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(3), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(4), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(5) { font-size: 13.5px; color: #5E6C84; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(3) { max-width: 190px; } /* Add: a button, not a bare link. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6) > p { white-space: nowrap; width: 1%; text-align: right; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6) a, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(3)) td:last-child a[href*="__attachments"] { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #0093D0; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none !important; border: 0; transition: background .15s ease; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table td a[href*="__attachments"]:hover { background: #0C6E9E; } /* Location links stay readable rather than shouting. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table td a:not([href*="__attachments"]) { color: #0C66A4; text-decoration: underline; text-underline-offset: 2px; } /* ---- Per-day accents ---- Two sets on purpose: the broad one also colours the three-column downloads table, the second repeats the day colours at the specificity needed to beat the generic button rule above. Deleting either leaves some buttons the default blue. */ :is(html[data-confluence-content-id="44040194"], html[data-confluence-content-id="43810819"]) main table th { background: #DEEBFF; border-bottom-color: #0175C8; } html[data-confluence-content-id="44236801"] main table th { background: #FFF4DC; border-bottom-color: #E8A317; } html[data-confluence-content-id="44236834"] main table th { background: #E0F7FA; border-bottom-color: #17A2B8; } html[data-confluence-content-id="43778057"] main table th { background: #EAE6FF; border-bottom-color: #6554C0; } :is(html[data-confluence-content-id="44040194"], html[data-confluence-content-id="43810819"]) main table td a[href*="__attachments"] { background: #0175C8; } html[data-confluence-content-id="44236801"] main table td a[href*="__attachments"] { background: #B87400; } html[data-confluence-content-id="44236834"] main table td a[href*="__attachments"] { background: #17A2B8; } html[data-confluence-content-id="43778057"] main table td a[href*="__attachments"] { background: #6554C0; } :is(html[data-confluence-content-id="44040194"], html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6) a { background: #0175C8; } html[data-confluence-content-id="44236801"] main table:has(th:nth-child(6)) td:nth-child(6) a { background: #B87400; } html[data-confluence-content-id="44236834"] main table:has(th:nth-child(6)) td:nth-child(6) a { background: #17A2B8; } html[data-confluence-content-id="43778057"] main table:has(th:nth-child(3)) td:last-child a[href*="__attachments"] { background: #6554C0; } /* ---- Phones: rows become cards ---- Six columns cannot work at 375px. Only the day tables restack. The header is a of inside tbody - these tables have no , so hiding thead does nothing. */ @media (max-width: 760px) { :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tr:has(th) { display: none; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tbody, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tr, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td { display: block; width: auto; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tr { border: 1px solid #DFE1E6; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; background: #fff; box-shadow: 0 1px 2px rgba(9,30,66,.08); } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tbody tr:nth-child(even) td:not(:nth-child(1)), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) tbody tr:hover td:not(:nth-child(1)) { background: transparent; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td { border: 0; padding: 2px 0; width: auto !important; max-width: none !important; text-align: left !important; } /* Time first, as a tinted badge. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(1) { display: inline-block; background: #EEF3F8; color: #172B4D; border-radius: 6px; padding: 2px 8px; margin-bottom: 4px; font-size: 13px; } /* Then the session name, at heading size. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(2) { font-size: 17px; line-height: 1.3; margin-bottom: 2px; } /* The rest labelled, since the header row is gone. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(4) > p::before { content: "📍 "; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(5) > p::before { content: "👤 "; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6) { margin-top: 10px; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(6) a { display: block; text-align: center; padding: 9px 14px; font-size: 14px; } :is(html[data-confluence-content-id="44040194"], html[data-confluence-content-id="43810819"]) main table:has(th:nth-child(6)) td:nth-child(1) { background: #DEEBFF; } html[data-confluence-content-id="44236801"] main table:has(th:nth-child(6)) td:nth-child(1) { background: #FFF4DC; } html[data-confluence-content-id="44236834"] main table:has(th:nth-child(6)) td:nth-child(1) { background: #E0F7FA; } } /* ---- Desktop: give the day pages their width back ---- Three things pin them to 725px and all three have to go: the 280px "On this Page" rail (these pages have no headings, so it renders 0x0), section.article-body's hard 760px, and div.theme-table's 760px. Capped at 1200px, the banner SVG's own width. Gated on having a six-column table, not on the banner filename - the parent page reuses Day 1's banner and its three-column table looked broken when widened. */ @media (min-width: 1000px) { :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main.main-content:has(table th:nth-child(6)) { grid-template-columns: 1fr; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main.main-content:has(table th:nth-child(6)) nav.toc { display: none; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main.main-content:has(table th:nth-child(6)) article.fb-layout-container > header, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main.main-content:has(table th:nth-child(6)) section.article-body, :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main.main-content:has(table th:nth-child(6)) .theme-table { width: 100%; max-width: 1200px; } :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main:has(table th:nth-child(6)) table { width: 100%; } /* Prose keeps a readable measure. The banner sits in a

of its own, so any paragraph holding an image is exempt from the cap. */ :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main:has(table th:nth-child(6)) section.article-body > p:not(:has(img)), :is(html[data-confluence-content-id="44040194"],html[data-confluence-content-id="44236801"],html[data-confluence-content-id="44236834"],html[data-confluence-content-id="43778057"],html[data-confluence-content-id="43810819"]) main:has(table th:nth-child(6)) section.article-body > ul { max-width: 78ch; } } /* ============================================================ C. HOMEPAGE HERO The artwork itself is a Scroll theme setting, not set here. What IS set here is the banner's SHAPE, matched to the artwork so that cover never crops it - see the ratio note below, and keep the two in step. Not the same "banner" as section B - those are the schedule pages' SVG strips. ============================================================ */ /* The artwork already reads EPIC REFUEL / ROCHESTER REGIONAL HEALTH, so the theme's h1 printed the wordmark twice. Hidden VISUALLY, not removed: it is the page's only heading and the words exist only as pixels. */ header[data-component="banner"] hgroup h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The tagline was also removed at source, so this may have nothing to act on. */ header[data-component="banner"] hgroup p { display: none; } /* The hero search bar is gone at EVERY width, requested 2026-09-14. It was a duplicate: the header carries its own search control on every page, and the phone drawer has one too. Both of those stay - this hides only the big box sitting on the artwork. This also retires the margin-block-start / translate nudge that used to push the bar clear of the wordmark. Those two numbers had to be reset by eye every time the artwork changed; with no bar there is nothing to position. */ header[data-component="banner"] search-bar { display: none; } /* ---- Hero shape: MATCHED TO THE ARTWORK ------------------------------ THE RATIO BELOW IS A COPY OF A FACT ABOUT THE IMAGE FILE. If the hero artwork is replaced, change it in the same breath or the banner starts clipping - silently, and differently at every screen width. Why a ratio at all: the theme's banner is viewport-wide with a fixed height, so its shape changes with the window, while background-size:cover throws away whatever does not fit. Clipping is simply box ratio != artwork ratio. Match the two and nothing is ever cut. Current artwork: 26-0806_RRH_Epic Refuel_WordBanner_R2 (1).jpg, 1500x375, 4.000:1 - hence 4 / 1. Measured with the old fixed 240px height: 94% of the artwork visible at 1024 wide, 67% at 1440, 50% at 1920, 38% at 2560. Below ~960 it flipped and cut the sides instead. max-block-size caps the height on very wide screens, which is the one place this still crops: 100% visible from 375 through 1920, 75% at 2560, 50% at 3840. Remove the cap and it never crops at all, at the cost of a 960px banner on a 4K display. THE DURABLE FIX IS NOT CSS. Ask for a hero exported with dead space around the wordmark, so a centre crop cannot reach it. Then the theme's own default height is safe at any width and this rule can go. The artwork has been three different shapes - 2.671:1, 4.091:1, 4.000:1 - and each change broke a hard-coded ratio here without any error to notice. Also worth knowing: 1500px wide upscales on large monitors (1.3x at 1920, 1.7x at 2560). Ask for 2400px or more. ============================================================ */ header[data-component="banner"] { aspect-ratio: 4 / 1; min-block-size: 0; max-block-size: 480px; background-position: center; background-size: cover; background-repeat: no-repeat; }