/* ex-immersive.css — the asset-page "immersive hero" look for the country & theme pages. The purple wave bg is already on (from feed.css, which these pages load); this file just makes the hero TRANSPARENT (reads through to the wave) with DARK text/surfaces (the wave is light) and turns the sheets 62%-white so the wave shows through — matching /asset. Scoped: only country.html / theme.html link this, so the asset page (which drives its wave colour from the logo, in asset.css) is untouched. These pages have no single "brand" colour, so the wave stays the neutral purple. */ /* hero: no fill → the body wave shows; flip text/surfaces to the dark tone (readable on the light wave). */ .ex-hero { background: transparent; --fg: #1A1712; --fg-dim: #5F574B; --surf: 26, 23, 18; } /* semantic up/down tuned for the light bg (same as the asset light-tone). */ .ex-hero .ex-quote .up, .ex-hero .ex-quote .q-core .up { color: #0f8f43; } .ex-hero .ex-quote .down, .ex-hero .ex-quote .q-core .down { color: #cc2f2f; } /* the hero mark (flag / megatrend logo) gets the same 2px ring in the text colour as the asset logo. */ .ex-hero-logo img { border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; } /* the sheets: white but 62% opaque so the wave shows through. .ex-index-wrap is full-width; .ex-content has a max-width (centred) → paint a FULL-BLEED band behind it so wide-screen sides aren't bare. */ .ex-index-wrap { background: rgba(255, 255, 255, .62); } .ex-content { position: relative; } .ex-content::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgba(255, 255, 255, .62); } /* GICS has no index chart, so its .ex-content is the TOP sheet (directly under the hero). Give it the same look .ex-index-wrap gets on theme/country — rounded top corners + rise into the hero — so the sheet reads the same everywhere. Scoped by adjacency: only a page whose .ex-content sits RIGHT AFTER .ex-hero (i.e. no index sheet in between → gics) matches; theme & country have .ex-index-wrap between them, so untouched. Pure CSS, no HTML change. */ .ex-hero + .ex-content { margin-top: calc(-1 * var(--sheet-overlap)); z-index: 2; } .ex-hero + .ex-content::before { border-radius: var(--radius) var(--radius) 0 0; } /* inset stays full-bleed (from base) */