/* Header corrections for the Funeral Convergence theme. * * TWO PROBLEMS IN THE EXPORT, both visible at ordinary laptop widths (1366 and below): * * 1. The nav links are `display:inline`, so the longer labels wrap onto a second line box. * A `border-bottom` on a wrapped INLINE element is painted under EVERY line fragment, so * the active page's underline was drawn through the middle of the item -- it read as a * strike-through on "Sample Reports". Making the links inline-block and nowrap gives each * item a single box and therefore a single underline. * * 2. Even unwrapped, the nav does not fit beside the brand: it needs about 1074px and the * space left beside the logo in a 1280px container is about 970px. The export "solved" * this by letting the text wrap, which is what caused problem 1. Shrinking the type to * force a fit was rejected -- it needed 13px nav text with 18px to spare, on a site whose * whole proposition is executive readability. * * THE FIX: centre the brand above a full-width nav row. The nav then gets the whole 1200px * content width for the ~1074px it needs, which leaves real slack, and the logo gets bigger * rather than smaller. Angel's call, 2026-09-22. * * Scoped to >=1081px so the export's own burger menu below that is untouched. */ nav[aria-label="Primary"] a { display: inline-block; white-space: nowrap; } @media (min-width: 1081px) { /* Row 1: brand left, utility cluster right. Row 2: nav, left-aligned, full width. The nav no longer competes with the logo for space, which is the whole reason the header was centred before -- so it gets its full size back. */ header > div[data-pad] { flex-wrap: wrap !important; flex-direction: row !important; height: auto !important; padding-top: 16px !important; padding-bottom: 0 !important; align-items: center !important; gap: 0 !important; } header > div[data-pad] > a:first-child { flex-direction: row !important; align-items: center !important; gap: 11px !important; } header img { width: 46px !important; height: 46px !important; } header > div[data-pad] > a:first-child span { font-size: 19px !important; } nav[aria-label="Primary"] { flex-basis: 100% !important; width: 100% !important; justify-content: flex-start !important; margin-top: 14px !important; } nav[aria-label="Primary"] ul { justify-content: flex-start !important; gap: 26px !important; } nav[aria-label="Primary"] ul a { padding-bottom: 14px !important; display: inline-block; } /* The CTA now lives on row 1, so the copy inside the nav is redundant. */ nav[aria-label="Primary"] > a { display: none !important; } } /* Audit F14. Below ~380px the brand and the Menu button do not fit on one line, the * button wraps under the brand, and the export's fixed 80px row let the open menu sit * on top of it (button 72-114px, menu from 93px). Let the row grow instead. Measured * 2026-09-23: at 320 and 360px the menu now starts at 127px, below the button; 390px * and wider are unchanged (one 80px row). */ @media (max-width: 1080px) { header > div[data-pad] { height: auto !important; min-height: 80px; } } /* The utility cluster is desktop-only; the mobile sheet already carries both. */ @media (max-width: 1080px) { [data-fc-utility] { display: none !important; } } /* The logo carries four colours and the chrome used none of them. */ header { border-bottom: 0 !important; box-shadow: inset 0 -1px 0 #E3E8EE; } header::after { content: ""; display: block; height: 3px; background: linear-gradient(to right, #E2701C 0 25%, #2E8FA8 25% 50%, #5FA82E 50% 75%, #A05FC4 75% 100%); } /* Coverage strip: keep it to two lines on a phone rather than four. */ @media (max-width: 680px) { [data-fc-cov] { gap: 6px 18px !important; font-size: 12.5px !important; } } /* --------------------------------------------------------------------------- * Mobile: the hero/CTA button rows do not wrap. * * On the home page at 390px the row holding "Explore Reports" and "Contact * Funeral Convergence" measures 451px, pushing the document to 476px and giving * the whole page a horizontal scrollbar. The row is a flex container with no * class of its own, so it is selected by what it contains. * Confirmed live 2026-09-22. * ------------------------------------------------------------------------- */ @media (max-width: 640px) { /* flex-wrap alone is NOT enough, and that was the first attempt: the row is itself a flex item sized to max-content (451px), so it overflows before it ever wraps. It has to be capped to the line first. */ :is(div, p):has(> .site-btn) { flex-wrap: wrap !important; max-width: 100% !important; flex-basis: 100% !important; } .site-btn { max-width: 100%; } } /* --------------------------------------------------------------------------- * Mobile: multi-column grids that opted out of the export's own responsive * system. * * The export collapses its grids at mobile through data attributes -- data-split, * data-g3, data-g4 -- which its shell CSS targets. Some sections were authored * with a bare `grid-template-columns` and none of those attributes, so they never * collapse. On /county-market-intelligence-reports/ at 390px this pushed the page * to 558px wide. Confirmed live 2026-09-22. * * Collapse only the ones that opted out; anything carrying a responsive attribute * is left to the export's own rules. * ------------------------------------------------------------------------- */ @media (max-width: 720px) { main [style*="grid-template-columns"]:not([data-split]):not([data-g3]):not([data-g4]) { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------------- * Filter and form controls: bigger. * * The state / product / geography selects shipped at 15px with a 13px uppercase * label and 1px letter-spacing, in a 49px box. Angel reported them hard to see * and read on /order-reports/. Raised across every filter and form control on * the site so they stay consistent with each other, not just on that one page. * * 17px is above the 16px threshold where iOS Safari stops zooming the page on * focus, which also removes an unwanted mobile jump. * ------------------------------------------------------------------------- */ main select, main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="search"], main textarea { font-size: 17px !important; padding: 15px 16px !important; line-height: 1.35 !important; } /* The label above each control. Uppercase at 13px with wide tracking is hard to * read at a glance; a little more size and a little less tracking fixes it * without changing the design's voice. */ main label { font-size: 14px !important; letter-spacing: 0.06em !important; } /* Selects need room for the native chevron at the larger size. */ main select { padding-right: 40px !important; } /* --------------------------------------------------------------------------- * Monospace was doing a job it is bad at. * * IBM Plex Sans stays: it is one of the two typefaces most recommended for * fintech and analytics work, precisely because its figures are unambiguous at * small sizes. The problem was never the typeface. * * The problem is IBM Plex MONO being used for running prose and labels at * 9px to 12px. The footer disclaimer is a 185-character sentence set in * monospace at 11.5px. Monospace is for figures and codes, where equal advance * width helps columns line up; in a sentence it slows reading, because every * letter occupies the same width whether it is an i or a w. * * So: prose out of mono, and nothing below 12px. Angel reported this as hard to * read, 2026-09-22. * ------------------------------------------------------------------------- */ footer [style*="IBM Plex Mono"] { font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important; font-size: 13.5px !important; letter-spacing: normal !important; } /* The uppercase column headings keep their tracking -- they are labels, not prose. */ footer h2[style*="IBM Plex Mono"] { font-size: 12.5px !important; letter-spacing: 0.1em !important; } /* Small mono labels elsewhere: raise the floor to 12px. The runtime writes * normalised px values into the style attribute, so these match exactly. */ main [style*="IBM Plex Mono"][style*="font-size: 9px"], main [style*="IBM Plex Mono"][style*="font-size: 9.5px"], main [style*="IBM Plex Mono"][style*="font-size: 10px"], main [style*="IBM Plex Mono"][style*="font-size: 11.5px"] { font-size: 12px !important; } /* --------------------------------------------------------------------------- * Form typography, and a calmer page background. * * Angel, 2026-09-22: the contact form is hard to read, and the page is too * bright as plain white. * * Measured on /contact/ before the change: field labels 14px, section legends * 13px, the helper line 13px, the submit button 15px, and the checkboxes at the * browser default 17x17. The inputs themselves were already 17px from the * earlier control pass, so the labels were the weak link, not the fields. * * The background uses #EDF0F4, which the site already uses for hairlines, rather * than a new grey. Cards stay white so they still read as cards against it. * ------------------------------------------------------------------------- */ body { background: #EDF0F4 !important; } /* Field labels and the small print inside forms. */ main form label, main fieldset > label { font-size: 15.5px !important; letter-spacing: 0.02em !important; } main fieldset legend { font-size: 14.5px !important; } main form p { font-size: 14.5px !important; } /* Checkbox and radio rows: the control and its text both. */ main input[type="checkbox"], main input[type="radio"] { width: 20px !important; height: 20px !important; accent-color: #0F1E33; } main input[type="checkbox"] + span, main input[type="radio"] + span, main label:has(> input[type="checkbox"]), main label:has(> input[type="radio"]) { font-size: 15.5px !important; } /* The submit button was smaller than the fields above it. */ main form button, main form [type="submit"] { font-size: 16.5px !important; padding: 16px 34px !important; } /* --------------------------------------------------------------------------- * Sample Reports and Order Reports start blank and wait for the customer. * The class is toggled by assets/js/fc-sample-gate.js; the rule lives here so it * survives every dc-runtime re-render, which a JS style assignment does not. * ------------------------------------------------------------------------- */ body.fc-gate-list [data-fc-results] { display: none !important; } body.fc-gate-list .fc-gate-count { display: none !important; } /* --------------------------------------------------------------------------- * Body copy: darker, and a touch heavier. * * Angel, 2026-09-22: the running text is hard to read. Contrast was NOT the * problem -- #33465E on the page background measures 8.43:1, already AAA. The * problem is perceptual weight: 18px at weight 400 in a light mid-blue-grey on a * tinted background reads faint even when it technically passes. * * Body copy moves to #16283F, the ink the site already uses for headings, at * weight 450. Hierarchy is then carried by size and weight rather than by making * the reading text lighter, which is the more legible arrangement anyway. * * The runtime normalises inline styles to rgb(), so these selectors target the * rendered values: rgb(51, 70, 94) = #33465E, rgb(76, 95, 118) = #4C5F76. * ------------------------------------------------------------------------- */ main [style*="rgb(51, 70, 94)"], main [style*="rgb(76, 95, 118)"] { color: #16283F !important; font-weight: 450; } /* --------------------------------------------------------------------------- * About Us: tell the two card rows apart. * * Angel, 2026-09-22: "How we work" and "Who we serve" looked identical. They are * byte-identical in the export -- same background, same border, same accent rule. * The only structural difference is that the "Who we serve" cards contain a link. * * That difference IS the distinction worth drawing: the second row is three * choices you can act on, the first is three statements. So the statements lose * the card chrome and become left-ruled notes, and only the actionable cards keep * looking like cards. It also stops three non-clickable boxes looking clickable, * which is the same trap the Contact page's six dead cards fell into. * * Scoped by the per-page body hook so no other page shifts unasked. * ------------------------------------------------------------------------- */ [data-fc-page="about-us"] main li:has(h3):not(:has(a)) { background: transparent !important; border-width: 0 0 0 4px !important; padding: 2px 0 2px 22px !important; } [data-fc-page="about-us"] main li:has(h3):not(:has(a)) h3 { font-size: 19px !important; margin-bottom: 2px; } /* The runtime writes border-color as four values with the accent FIRST, so the left edge would inherit the grey. Re-state the accent on the left edge. */ [data-fc-page="about-us"] main li:not(:has(a))[style*="rgb(253, 139, 66)"] { border-left-color: #E2701C !important; } [data-fc-page="about-us"] main li:not(:has(a))[style*="rgb(90, 185, 205)"] { border-left-color: #2E8FA8 !important; } [data-fc-page="about-us"] main li:not(:has(a))[style*="rgb(140, 228, 80)"] { border-left-color: #5FA82E !important; } [data-fc-page="about-us"] main li:not(:has(a))[style*="rgb(212, 154, 238)"] { border-left-color: #A05FC4 !important; } /* --------------------------------------------------------------------------- * About Us: "How we work" on navy, so the three commitments stand out. * Angel, 2026-09-22. * * The four accent rules are left as they are: the deepened palette was chosen on * 2026-08-26 precisely because every colour in it clears WCAG 2.2's 3:1 for * non-text graphics on BOTH navy and white, so they hold here without change. * * The type has to invert, including over the earlier body-copy rule that forces * #16283F -- these selectors are more specific, so they win without needing to * touch that rule. * ------------------------------------------------------------------------- */ [data-fc-page="about-us"] [data-fc-section="how-we-work"] { background: #0F1E33 !important; border-bottom-color: rgba(255, 255, 255, 0.12) !important; } /* Eyebrow */ [data-fc-page="about-us"] [data-fc-section="how-we-work"] p[style*="text-transform: uppercase"] { color: #A9BACE !important; } /* Section heading and each commitment's heading */ [data-fc-page="about-us"] [data-fc-section="how-we-work"] h2, [data-fc-page="about-us"] [data-fc-section="how-we-work"] h3 { color: #FFFFFF !important; } /* Body copy inside the section, including anything the global rule darkened. */ [data-fc-page="about-us"] [data-fc-section="how-we-work"] li p, [data-fc-page="about-us"] [data-fc-section="how-we-work"] li [style*="rgb(76, 95, 118)"], [data-fc-page="about-us"] [data-fc-section="how-we-work"] li [style*="rgb(51, 70, 94)"] { color: #D6E0EB !important; } /* --------------------------------------------------------------------------- * About Us: the "Who we are" brand block. * * Measured before changing: a 72px mark and a 32px name sat in a 479px column * beside a 649px block of 18px text, everything top-aligned, with the eyebrow, * mark and name spaced 18px and 20px apart so they read as three separate things * rather than one lockup. * * Changes: the mark grows to 96px, the three parts tighten into a single lockup, * the name goes to 34px so it holds its own against the body text, and the two * columns centre against each other so the short left stack is not stranded at * the top of a taller block. * ------------------------------------------------------------------------- */ [data-fc-page="about-us"] [data-split]:has(h2 img) { align-items: center !important; } [data-fc-page="about-us"] [data-split]:has(h2 img) > div:first-child > p { margin-bottom: 14px !important; } [data-fc-page="about-us"] h2 img { width: 96px !important; height: 96px !important; margin-bottom: 14px !important; } [data-fc-page="about-us"] [data-split]:has(h2 img) h2 { font-size: 34px !important; letter-spacing: -0.025em !important; line-height: 1.1 !important; } @media (max-width: 900px) { /* Stacked on a phone: the lockup does not need to be centred against anything. */ [data-fc-page="about-us"] [data-split]:has(h2 img) { align-items: start !important; } [data-fc-page="about-us"] h2 img { width: 80px !important; height: 80px !important; } } /* --------------------------------------------------------------------------- * About Our Data: a rule draws down the four method steps. * * Restrained on purpose -- the sides-and-land version was rejected as too much. * The RULE is the only thing that moves; the steps just fade as it reaches them. * * Every selector carries :nth-child on BOTH the armed and the released side. The * previous animation faded in while still displaced because the armed rules used * :nth-child and the release rule did not, so armed won on specificity. * ------------------------------------------------------------------------- */ body.fc-rule-armed main ol.site-reveal { position: relative; } body.fc-rule-armed main ol.site-reveal::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #0F1E33; transform: scaleY(0); transform-origin: top center; /* LINEAR on purpose. An eased curve is heavily front-loaded: measured at 82% drawn by 350ms, so the rule finished long before the steps it is supposed to be revealing. A drawn line should travel at a constant rate. */ transition: transform 2000ms linear; } body.fc-rule-go main ol.site-reveal::before { transform: scaleY(1); } body.fc-rule-armed main ol.site-reveal > li:nth-child(1), body.fc-rule-armed main ol.site-reveal > li:nth-child(2), body.fc-rule-armed main ol.site-reveal > li:nth-child(3), body.fc-rule-armed main ol.site-reveal > li:nth-child(4) { opacity: 0; transition: opacity 620ms cubic-bezier(.32, .72, 0, 1); } /* Timed so each step arrives as the rule passes it: 2000ms over four rows. Slowed from 1250ms at Angel's request, 2026-09-22. Keep the delays at roughly 0 / 0.3 / 0.55 / 0.8 of the rule duration if it is retimed again. */ body.fc-rule-go main ol.site-reveal > li:nth-child(1) { opacity: 1; transition-delay: 100ms; } body.fc-rule-go main ol.site-reveal > li:nth-child(2) { opacity: 1; transition-delay: 590ms; } body.fc-rule-go main ol.site-reveal > li:nth-child(3) { opacity: 1; transition-delay: 1090ms; } body.fc-rule-go main ol.site-reveal > li:nth-child(4) { opacity: 1; transition-delay: 1580ms; } @media (prefers-reduced-motion: reduce) { body.fc-rule-armed main ol.site-reveal::before { transform: scaleY(1) !important; transition: none !important; } body.fc-rule-armed main ol.site-reveal > li { opacity: 1 !important; transition: none !important; } } /* --------------------------------------------------------------------------- * About Our Data hero: the US coverage map. * * Geographic outlines, from "Blank US Map (states only)" on Wikimedia Commons -- * CC0 1.0 Public Domain Dedication, no attribution required, commercial use fine. * Deliberately NOT the SVG from mapmaker.io, which is that company's own asset. * * The highlighted states and their per-state transition-delays are generated into * the SVG at build time from report-catalog.js by build/make-map.py, so the map * cannot drift out of step with the products actually sold. * ------------------------------------------------------------------------- */ [data-fc-hero] { display: block; } [data-fc-heromap] { margin-top: 40px; } .fc-map { width: 100%; height: auto; display: block; } .fc-st { fill: #1B3050; } /* a state we do not cover yet */ .fc-borders { stroke: #0F1E33; stroke-width: 1; } /* borders read as the navy behind */ /* Armed: covered states start dark, like the rest. */ body.fc-map-armed .fc-st.fc-on { fill: #1B3050; transition: fill 620ms cubic-bezier(.32,.72,0,1); } /* Released: they light in the order baked into the SVG, west to east. */ body.fc-map-go .fc-st.fc-on { fill: #2E8FA8; } @media (prefers-reduced-motion: reduce) { body.fc-map-go .fc-st.fc-on { transition: none !important; transition-delay: 0ms !important; } } @media (min-width: 1081px) { /* Text left, map right. */ [data-fc-hero] { display: grid !important; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; } [data-fc-heromap] { margin-top: 0; } } /* --------------------------------------------------------------------------- * Reports and Coverage: the live coverage section. * * Replaces a flat state-map.png with the generated map plus a clickable state list, * on navy so it reads as a feature rather than a figure, and matching the navy * heroes used elsewhere on the site. * * Three tiers: published (solid teal), coverage active but nothing published yet * (outlined teal -- Michigan), and not covered (dark). Angel's decision 2026-09-22. * ------------------------------------------------------------------------- */ /* the coverage block now lives inside the hero; no separate section to border */ /* The state list, legend and caption sit under the hero's two-column grid. */ [data-fc-covextras] { margin-top: 56px; } /* Coverage active, nothing published yet: outlined, not filled. */ .fc-st.fc-soon { fill: #16324E; stroke: #2E8FA8; stroke-width: 2; } body.fc-map-armed .fc-st.fc-soon { stroke: #1B3050; transition: stroke 620ms cubic-bezier(.32,.72,0,1); } body.fc-map-go .fc-st.fc-soon { stroke: #2E8FA8; } /* The map is a FIGURE on this page, not a control: Angel, 2026-09-23. No pointer, * no hover, no focus ring -- the state-name list below it does the selecting. */ /* The state list */ /* Angel, 2026-09-23: bolder and bigger. With the map no longer clickable this is the * only instruction on the page, so it has to read as one. */ .fc-cl-hint { font-size: 18.5px; font-weight: 600; color: #FFFFFF; margin: 0 0 18px; /* A rule under it, in the same teal as a covered state, so the heading reads as the top of the state list rather than a floating line of text. Angel, 2026-09-23. */ padding-bottom: 14px; border-bottom: 1px solid #2E8FA8; } .fc-coverage-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; } .fc-cl { appearance: none; background: none; border: 0; padding: 7px 8px; width: 100%; text-align: left; font-family: inherit; font-size: 15px; color: #D6E0EB; cursor: pointer; border-radius: 3px; display: block; text-decoration: none; transition: background-color .25s cubic-bezier(.32,.72,0,1), color .25s cubic-bezier(.32,.72,0,1); } .fc-cl:hover { background: rgba(255,255,255,.08); color: #fff; } .fc-cl:focus-visible { outline: 2px solid #E2701C; outline-offset: 1px; } .fc-cl-soon { cursor: default; color: #A9BACE; } .fc-cl-soon:hover { background: none; } .fc-cl-note { font-size: 12.5px; color: #8FA6BF; margin-left: 8px; } .fc-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 13px; color: #A9BACE; } .fc-legend span { display: flex; align-items: center; gap: 8px; } .fc-key { width: 12px; height: 12px; border-radius: 2px; display: inline-block; } .fc-key-on { background: #2E8FA8; } .fc-key-soon { background: #16324E; box-shadow: inset 0 0 0 2px #2E8FA8; } .fc-cov-caption { margin: 28px 0 0; font-size: 15px; line-height: 1.55; color: #C6D2E0; max-width: 860px; } @media (min-width: 700px) { .fc-coverage-list { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 1081px) { .fc-coverage-list { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 560px) { .fc-coverage-list { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* --------------------------------------------------------------------------- * Hero photos that fill their band and fade under the copy. * Home, and Corporate Intelligence Program. * * Angel, 2026-09-22. It was a bordered 330px panel sitting in the right grid cell * with navy all around it. Now it covers the whole section and a left-to-right * scrim keeps the headline on solid navy: "it should fade where writing goes * over it." * * The figure leaves the grid flow at desktop width, so the copy keeps column one * and the photo spans the full band behind it. The grid wrapper sets no z-index * and no transform, so it creates no stacking context and the figure can sit * behind its own sibling. The copy is raised explicitly: an absolutely positioned * figure paints ABOVE in-flow content otherwise, whatever the source order. * * Height and border are gone from the figure's inline style (see mark_home_hero), * so these rules are not fighting an inline value. * ------------------------------------------------------------------------- */ [data-fc-herofill] { position: relative; overflow: hidden; } [data-fc-herocopy] { position: relative; z-index: 1; } [data-fc-heroart] img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Stacked layout: the photo stays a band under the copy, as before. */ @media (max-width: 1080px) { [data-fc-heroart] { height: 330px; border: 1px solid #35495F; } } @media (min-width: 1081px) { [data-fc-heroart] { position: absolute; inset: 0; z-index: 0; border: 0; } /* Sample Reports and About Us have short copy, so their bands came out 425px tall and cropped the photo to a strip with the dashboards buried under the scrim. The other two heroes are 601px and 464px because their copy is taller. Give this one comparable room and centre the copy in it. The figure is out of flow, so flex does not touch it. */ body[data-fc-page="sample-reports"] [data-fc-herofill], body[data-fc-page="about-us"] [data-fc-herofill], body[data-fc-page="contact"] [data-fc-herofill], body[data-fc-page="competitive-intelligence"] [data-fc-herofill], body[data-fc-page="order-reports"] [data-fc-herofill] { min-height: 470px; display: flex; align-items: center; } body[data-fc-page="sample-reports"] [data-fc-herocopy], body[data-fc-page="about-us"] [data-fc-herocopy], body[data-fc-page="contact"] [data-fc-herocopy], body[data-fc-page="competitive-intelligence"] [data-fc-herocopy], body[data-fc-page="order-reports"] [data-fc-herocopy] { width: 100%; } [data-fc-heroart]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0F1E33 0%, #0F1E33 34%, rgba(15, 30, 51, 0.88) 50%, rgba(15, 30, 51, 0.45) 70%, rgba(15, 30, 51, 0.18) 88%, rgba(15, 30, 51, 0.12) 100%); } } /* --------------------------------------------------------------------------- * A figure that blends into the page instead of sitting in a box. * * Sample Reports, "What a sample card carries": the photo sat in a bordered * 240px panel beside a taller card, so it neither aligned with the card nor * belonged to the section. Angel, 2026-09-23. * * Height comes from the grid row now, so it matches the card exactly. The left * edge fades into the section background; the photo's own subject is held on * the right by its inline object-position. * ------------------------------------------------------------------------- */ [data-fc-blendleft] { position: relative; } [data-fc-blendleft] img { display: block; width: 100%; height: 100%; object-fit: cover; } [data-fc-blendleft]::after { content: ''; position: absolute; inset: 0; pointer-events: none; /* Carried further across and eased more gradually: Angel, 2026-09-23, "blend the photo into it better", once the card beside it lost its white box. */ background: linear-gradient(90deg, #F5F7F9 0%, rgba(245, 247, 249, 0.96) 18%, rgba(245, 247, 249, 0.72) 34%, rgba(245, 247, 249, 0.38) 50%, rgba(245, 247, 249, 0.12) 64%, rgba(245, 247, 249, 0) 76%); } /* --------------------------------------------------------------------------- * The small coverage map in a light section column. * * The hero palette is built for navy: unlit states are #1B3050, which on a light * background reads as a solid dark blob. These rules invert that -- pale unlit * states, the same teal for covered ones -- and win on specificity because they * add the wrapper attribute to the same selectors. * ------------------------------------------------------------------------- */ [data-fc-sectionmap] { margin-top: 30px; max-width: 420px; } [data-fc-sectionmap] .fc-map { width: 100%; height: auto; display: block; } [data-fc-sectionmap] .fc-st { fill: #C8D2DE; } [data-fc-sectionmap] .fc-borders { stroke: #EDF1F5; } body.fc-map-armed [data-fc-sectionmap] .fc-st.fc-on { fill: #C8D2DE; } body.fc-map-go [data-fc-sectionmap] .fc-st.fc-on { fill: #2E8FA8; } [data-fc-sectionmap] .fc-st.fc-soon { fill: #E4EAF1; stroke: #2E8FA8; stroke-width: 2; } body.fc-map-armed [data-fc-sectionmap] .fc-st.fc-soon { stroke: #C8D2DE; } body.fc-map-go [data-fc-sectionmap] .fc-st.fc-soon { stroke: #2E8FA8; } /* --------------------------------------------------------------------------- * Home coverage results: the directory's COLUMN rule. * * The home finder reuses the Coverage Directory's row markup, but that page's * `[data-rowgrid]{grid-template-columns:...}` lives in its OWN page's inline *