, so it paints its own ground and type rather than relying on . */ min-width: 340px; background: var(--sv2-paper); color: var(--sv2-ink); font-family: var(--sv2-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .sv2-root *, .sv2-root *::before, .sv2-root *::after { box-sizing: border-box; } .sv2-root a { color: var(--sv2-pine); text-decoration: none; } .sv2-root a:hover { color: var(--sv2-marigold); } .sv2-root ::selection { background: var(--sv2-pine); color: var(--sv2-paper); } .sv2-root table { border-collapse: collapse; } .sv2-root img { max-width: 100%; } .sv2-view[hidden] { display: none; } /* --- buttons --- */ .sv2-btn-marigold, .sv2-btn-pine, .sv2-btn-ghost, .sv2-btn-plain { font: 600 13px var(--sv2-sans); padding: 11px 18px; border-radius: 8px; white-space: nowrap; } .sv2-root .sv2-btn-marigold { background: var(--sv2-marigold); color: #fff; } .sv2-root .sv2-btn-marigold:hover { background: var(--sv2-marigold-hover); color: #fff; } .sv2-root .sv2-btn-pine { background: var(--sv2-pine); color: #fff; } .sv2-root .sv2-btn-pine:hover { background: var(--sv2-pine-hover); color: #fff; } .sv2-root .sv2-btn-ghost { border: 1px solid rgba(20, 35, 28, .3); color: var(--sv2-ink); } .sv2-root .sv2-btn-ghost:hover { border-color: var(--sv2-ink); color: var(--sv2-ink); } /* hero-size button variants */ .sv2-btn-lg { font-size: 14px; padding: 14px 22px; border-radius: 9px; } .sv2-root .sv2-btn-plain { font: 600 14px var(--sv2-sans); padding: 14px 6px; } /* --- layout helpers --- */ .sv2-wrap { max-width: 1220px; margin: 0 auto; } .sv2-hero { max-width: 1220px; margin: 0 auto; padding: 84px 40px 56px; } .sv2-band { max-width: 1220px; margin: 0 auto; padding: 0 40px 40px; } .sv2-cards-band { max-width: 1220px; margin: 0 auto; padding: 16px 40px 72px; } .sv2-eyebrow { margin: 0 0 18px; font: 600 12px var(--sv2-sans); letter-spacing: .24em; color: var(--sv2-marigold-text); } .sv2-h1 { margin: 0; font: 500 60px/1.06 var(--sv2-serif); letter-spacing: -.01em; max-width: 760px; text-wrap: balance; } .sv2-root .sv2-h1 em { color: var(--sv2-pine); } .sv2-lede { margin: 26px 0 0; max-width: 640px; font-size: 16.5px; line-height: 1.65; color: var(--sv2-body); text-wrap: pretty; } .sv2-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 34px; } /* --- stat strip --- */ .sv2-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--sv2-hairline); border: 1px solid var(--sv2-hairline); border-radius: 14px; overflow: hidden; } .sv2-stat { background: var(--sv2-paper); padding: 22px 24px; } .sv2-stat-num { font: 500 32px var(--sv2-serif); } .sv2-stat-label { margin-top: 4px; font-size: 12.5px; color: var(--sv2-muted); line-height: 1.4; } /* --- sector cards --- */ .sv2-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; } .sv2-root .sv2-card { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 16px; padding: 28px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; color: var(--sv2-ink); transition: transform .18s ease, box-shadow .18s ease; } .sv2-root .sv2-card:hover { color: var(--sv2-ink); transform: translateY(-3px); box-shadow: 0 14px 32px -18px rgba(15, 44, 33, .4); } .sv2-card-top { display: flex; justify-content: space-between; align-items: baseline; } .sv2-card-index { font: 600 12px var(--sv2-sans); letter-spacing: .18em; color: var(--sv2-marigold-text); } .sv2-card-pages { font-size: 13px; color: var(--sv2-faint); } .sv2-card-title { margin: 0; font: 500 26px/1.15 var(--sv2-serif); } .sv2-card-copy { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sv2-muted); text-wrap: pretty; } .sv2-card-foot { margin-top: auto; border-top: 1px solid var(--sv2-row); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; } .sv2-card-stat { font: 500 30px var(--sv2-serif); color: var(--sv2-pine); } .sv2-card-stat-label { font-size: 12px; color: var(--sv2-muted); } .sv2-card-more { font: 600 13px var(--sv2-sans); color: var(--sv2-pine); } /* ========================================================================== Sector detail views ========================================================================== */ .sv2-detail { max-width: 1220px; margin: 0 auto; padding: 44px 40px 72px; } /* utility row above the detail hero */ .sv2-utility { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 38px; } .sv2-back, .sv2-next { border: none; background: none; cursor: pointer; font: 600 13.5px var(--sv2-sans); color: var(--sv2-pine); padding: 0; } .sv2-back:hover, .sv2-next:hover { color: var(--sv2-marigold); } .sv2-utility-meta { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: var(--sv2-faint); } .sv2-utility-index { letter-spacing: .16em; font-weight: 600; } .sv2-root .sv2-utility-meta a { font-weight: 600; } /* Show the full promo composition at its natural aspect ratio. */ .sv2-hero-band { margin: 0 0 40px; background: var(--sv2-tint); } .sv2-hero-band img { display: block; width: 100%; height: auto; object-fit: contain; } /* Keep the full Education and Startup images visible in shorter desktop bands. */ [data-view="education"] .sv2-hero-band img, [data-view="startup"] .sv2-hero-band img { width: auto; max-width: 100%; height: auto; max-height: 580px; margin-inline: auto; } .sv2-hero-band__caption { padding: 12px 16px; font: 500 12.5px/1.45 var(--sv2-sans); color: var(--sv2-muted); background: var(--sv2-tint); } /* detail hero */ .sv2-detail-hero { display: grid; grid-template-columns: minmax(340px, 1.35fr) minmax(300px, 1fr); gap: 48px; align-items: start; } .sv2-detail-h1 { margin: 0; font: 500 46px/1.1 var(--sv2-serif); letter-spacing: -.01em; } .sv2-detail-standfirst { margin: 10px 0 0; font: 500 17px/1.4 var(--sv2-serif); font-style: italic; color: var(--sv2-pine); } .sv2-detail-copy { margin: 24px 0 0; font-size: 15px; line-height: 1.7; color: var(--sv2-body); text-wrap: pretty; } .sv2-detail-copy + .sv2-detail-copy { margin-top: 16px; } /* 2x2 stat cards beside the detail hero */ .sv2-statcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sv2-statcard { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 12px; padding: 20px; } .sv2-statcard-num { font: 500 30px var(--sv2-serif); color: var(--sv2-pine); } .sv2-statcard-label { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--sv2-muted); } /* section headings inside a detail view */ .sv2-h2 { margin: 72px 0 8px; font: 500 30px var(--sv2-serif); } .sv2-h2-sub { margin: 0 0 10px; font-size: 14px; color: var(--sv2-muted); } .sv2-h3 { margin: 0 0 6px; font: 500 24px var(--sv2-serif); } /* numbered opportunity list */ .sv2-oppos { border-top: 1px solid var(--sv2-hairline); } .sv2-oppo { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--sv2-hairline); } .sv2-oppo-num { font: 500 30px var(--sv2-serif); color: rgba(20, 35, 28, .28); } .sv2-oppo-title { margin: 0; font: 600 17px var(--sv2-sans); } .sv2-oppo-copy { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--sv2-body); max-width: 820px; text-wrap: pretty; } .sv2-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--sv2-faint); max-width: 820px; } .sv2-note-label { color: var(--sv2-marigold-text); } /* map block */ .sv2-mapblock { margin: 72px 0 0; } .sv2-mapblock-eyebrow { margin: 0 0 6px; font: 600 12px var(--sv2-sans); letter-spacing: .22em; color: var(--sv2-marigold-text); } .sv2-mapblock-h2 { margin: 0; font: 500 30px var(--sv2-serif); } .sv2-mapblock-copy { margin: 12px 0 26px; font-size: 14px; line-height: 1.6; color: var(--sv2-muted); max-width: 760px; text-wrap: pretty; } /* tables */ .sv2-tableblock { margin: 64px 0 0; } .sv2-tableblock-tight { margin: 44px 0 0; } .sv2-tablecard { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 14px; overflow-x: auto; margin-top: 16px; } .sv2-table { width: 100%; min-width: 860px; font-size: 13.5px; } .sv2-table th { text-align: left; padding: 13px 18px; background: var(--sv2-tint); font: 600 11.5px var(--sv2-sans); letter-spacing: .1em; color: var(--sv2-body); } .sv2-table td { padding: 13px 18px; border-top: 1px solid var(--sv2-row); color: var(--sv2-body); } .sv2-table td.sv2-td-name { font-weight: 600; color: var(--sv2-ink); } .sv2-table td.sv2-td-nowrap { white-space: nowrap; } /* bottom CTA / next-sector row */ .sv2-detail-foot { margin: 64px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--sv2-hairline); padding-top: 28px; } /* --- numbered opportunity cards (tourism, textiles) --- */ .sv2-h2-tight { margin: 72px 0 20px; font: 500 30px var(--sv2-serif); } .sv2-oppocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .sv2-oppocard { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 14px; padding: 22px; } .sv2-oppocard-num { font: 600 12px var(--sv2-sans); color: var(--sv2-marigold-text); letter-spacing: .14em; } .sv2-oppocard-copy { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--sv2-body); } /* --- circuits grid --- */ .sv2-block { margin: 64px 0 0; } .sv2-block-h2 { margin: 0 0 12px; font: 500 30px var(--sv2-serif); } .sv2-block-copy { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--sv2-muted); max-width: 760px; text-wrap: pretty; } .sv2-circuits { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 10px 24px; background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 14px; padding: 26px 28px; } .sv2-circuit { display: flex; gap: 14px; align-items: baseline; font-size: 14px; color: var(--sv2-body); padding: 7px 0; border-bottom: 1px solid rgba(20, 35, 28, .07); } .sv2-circuit-num { font: 500 15px var(--sv2-serif); color: var(--sv2-marigold-text); min-width: 24px; } /* prev/next pair in a detail foot */ .sv2-detail-nav { display: flex; gap: 24px; flex-wrap: wrap; } /* ========================================================================== District maps — reused verbatim from the live Investable Sectors page (includes/key_sectors_map_*.php + js/key-sectors-maps.js + key-sectors-sticky.css). Those files are shared with the live page and are NOT modified here; the map reads its colours from --kss-* custom properties, so this wrapper re-points them at the V2 palette and supplies the per-sector accent that the live page would otherwise set on its rail link. ========================================================================== */ .sv2-mapwrap { --kss-ink: var(--sv2-ink); --kss-body: var(--sv2-body); --kss-muted: var(--sv2-muted); --kss-line: var(--sv2-hairline); --kss-line-strong: rgba(20, 35, 28, .24); --kss-paper: #fff; --kss-soft: var(--sv2-tint); --kss-saffron: var(--sv2-marigold); --kss-focus: var(--sv2-accent-primary); color: var(--sv2-body); font-family: var(--sv2-sans); } .sv2-mapwrap *, .sv2-mapwrap *::before, .sv2-mapwrap *::after { box-sizing: border-box; } /* The map inherits whichever sector it sits inside, so its accent tracks the same coding colour as that sector's card, tile and eyebrow. */ .sv2-mapwrap { --kss-sector-accent: var(--sv2-accent); --kss-sector-tint: color-mix(in srgb, var(--sv2-accent) 10%, transparent); } /* The live card carries its own top margin and shadow; soften it into the V2 page, which already spaces its blocks. */ .sv2-mapwrap .kss-map-card { margin-top: 0; box-shadow: none; border-radius: 14px; } /* --- map typography, matched to the V2 page --------------------------------- The shared stylesheet is written for the live page's Poppins scale: 10px eyebrows, 700-weight headings, browser-default body text. Spectral is only self-hosted at 400/500/600 here, so a 700 heading would render as a synthesised faux-bold. These rules restate each map text style in the V2 scale; the shared file itself is left untouched. */ .sv2-mapwrap .kss-map-eyebrow { font-family: var(--sv2-sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sv2-marigold-text); } .sv2-mapwrap .kss-map-topline h3 { font-family: var(--sv2-serif); font-size: 24px; font-weight: 500; letter-spacing: normal; line-height: 1.2; color: var(--sv2-ink); } .sv2-mapwrap .kss-map-topline p { font-family: var(--sv2-sans); font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--sv2-muted); } .sv2-mapwrap .kss-map-count { font-family: var(--sv2-sans); font-size: 12px; font-weight: 600; letter-spacing: .02em; } .sv2-mapwrap .kss-map-chip { font-family: var(--sv2-sans); font-size: 12px; font-weight: 600; letter-spacing: .02em; } .sv2-mapwrap .kss-map-list-title { font-family: var(--sv2-serif); font-size: 16px; font-weight: 500; letter-spacing: normal; color: var(--sv2-ink); } .sv2-mapwrap .kss-map-list-item, .sv2-mapwrap .kss-map-detail { font-family: var(--sv2-sans); font-size: 14px; line-height: 1.55; } .sv2-mapwrap .kss-map-list-item strong { font-size: 13.5px; font-weight: 600; } .sv2-mapwrap .kss-map-list-item span { font-size: 12px; } .sv2-mapwrap .kss-map-legend, .sv2-mapwrap .kss-map-orientation-note { font-family: var(--sv2-sans); font-size: 12px; color: var(--sv2-muted); } /* SVG text inside the map */ .sv2-mapwrap .kss-map-label { font-family: var(--sv2-sans); font-size: 10px; font-weight: 600; } .sv2-mapwrap .kss-map-river-label { font-family: var(--sv2-serif); font-size: 11px; font-style: italic; font-weight: 400; } /* --- basin share bars (hydropower table) --- */ .sv2-table td.sv2-td-num { text-align: right; } .sv2-table th.sv2-th-num { text-align: right; } .sv2-table th.sv2-th-share { width: 34%; } .sv2-bar { height: 9px; border-radius: 5px; background: var(--sv2-pine); } /* Hydropower's headline figures are longer strings, so they sit a notch down. */ .sv2-statcard-num--sm { font-size: 28px; } /* --- value-chain cards (textiles) --- */ .sv2-chaincard { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 14px; padding: 22px; } .sv2-chaincard-title { margin: 0; font: 500 19px var(--sv2-serif); } .sv2-chaincard-copy { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--sv2-muted); } /* --- two-up track cards (education) --- */ .sv2-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; } .sv2-track { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 16px; padding: 28px; } .sv2-track-title { margin: 0 0 16px; font: 500 22px var(--sv2-serif); } .sv2-track-list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--sv2-body); } .sv2-block-h2--wide { margin: 0 0 20px; font: 500 30px var(--sv2-serif); } /* --- category bar chart (startup) --- */ .sv2-barchart { background: #fff; border: 1px solid var(--sv2-hairline); border-radius: 16px; padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px 40px; } .sv2-barrow { display: grid; grid-template-columns: 1fr 170px 28px; gap: 12px; align-items: center; font-size: 13.5px; } .sv2-barrow-label { color: var(--sv2-body); } .sv2-bartrack { height: 9px; border-radius: 5px; background: var(--sv2-tint); } .sv2-barrow-count { text-align: right; } .sv2-block-copy--wide { margin: 0 0 22px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { /* The design ships no hamburger, so the nav link row is hidden on narrow screens for this draft; the CTA buttons and footer keep every destination reachable. Revisit when this page adopts the site's mobile nav. */ .sv2-nav { display: none; } .sv2-hero { padding: 56px 20px 40px; } .sv2-band { padding: 0 20px 32px; } .sv2-cards-band { padding: 16px 20px 56px; } .sv2-detail { padding: 32px 20px 56px; } .sv2-h1 { font-size: 40px; } .sv2-detail-h1 { font-size: 34px; } .sv2-h2, .sv2-h2-tight, .sv2-block-h2, .sv2-block-h2--wide { font-size: 26px; } .sv2-detail-hero { grid-template-columns: 1fr; gap: 28px; } .sv2-hero-band { margin-bottom: 28px; } .sv2-oppo { grid-template-columns: 48px 1fr; gap: 16px; } .sv2-barrow { grid-template-columns: 1fr 90px 28px; } .sv2-barchart { padding: 20px; } .sv2-circuits { padding: 20px; } } @media (max-width: 560px) { .sv2-statcards { grid-template-columns: 1fr; } .sv2-h1 { font-size: 32px; } .sv2-detail-h1 { font-size: 28px; } } /* ========================================================================== Accessibility ========================================================================== */ .sv2-root :focus-visible { outline: 2px solid var(--sv2-pine); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sv2-root .sv2-card, .sv2-root .sv2-card:hover { transition: none; transform: none; } .sv2-mapwrap .kss-map-district { transition: none; } } /* --- narrow-screen overflow guards ----------------------------------------- auto-fill/auto-fit tracks keep their minmax() floor even when the viewport is narrower than it, which pushes the page sideways. min(Xpx, 100%) lets each track collapse below its ideal width instead. The long sector CTAs carry nowrap from the shared button rule, so they are allowed to wrap here. */ .sv2-cardgrid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } .sv2-oppocards { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); } .sv2-circuits { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); } .sv2-tracks { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); } .sv2-barchart { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); } .sv2-statstrip { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .sv2-barrow-label { min-width: 0; overflow-wrap: anywhere; } .sv2-circuit { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .sv2-root .sv2-btn-lg { white-space: normal; } .sv2-detail-foot .sv2-btn-lg { max-width: 100%; } } /* ========================================================================== Polished Investable Sectors system Light ground, terracotta accent. Green appears only as Sector 01's coding colour — never as the primary accent, and never as a dark page band. Values are taken literally from the reference build; nothing is invented. ========================================================================== */ :root { /* terracotta accent scale */ --sv2-accent-primary: #C2701F; --sv2-accent-hover: #A85E15; --sv2-accent-text: #B4641C; --sv2-accent-text-dark: #8F5217; --sv2-rule: rgba(20, 35, 28, .16); /* per-sector coding, defaults to terracotta */ --sv2-accent: #C2701F; --sv2-accent-dark: #8F5217; } /* per-sector coding — one place, used by cards and detail views alike */ .sv2-root .sv2-sector--agriculture { --sv2-accent: #3E7A33; --sv2-accent-dark: #2C5A24; } .sv2-root .sv2-sector--tourism { --sv2-accent: #C2701F; --sv2-accent-dark: #8F5217; } .sv2-root .sv2-sector--hydropower { --sv2-accent: #23617A; --sv2-accent-dark: #1A4A5E; } .sv2-root .sv2-sector--textiles { --sv2-accent: #A34A38; --sv2-accent-dark: #7E3728; } .sv2-root .sv2-sector--education { --sv2-accent: #4B5A8A; --sv2-accent-dark: #39466E; } .sv2-root .sv2-sector--startup { --sv2-accent: #6B7A2E; --sv2-accent-dark: #505E1F; } /* --- interactivity is always terracotta --- */ .sv2-root a { color: var(--sv2-accent-text); } .sv2-root a:hover { color: var(--sv2-accent-text-dark); } .sv2-root :focus-visible { outline-color: var(--sv2-accent-primary); } .sv2-root .sv2-btn-primary, .sv2-root .sv2-btn-marigold { background: var(--sv2-accent-primary); color: #fff; font: 600 14px var(--sv2-sans); padding: 14px 22px; border-radius: 9px; } .sv2-root .sv2-btn-primary:hover, .sv2-root .sv2-btn-marigold:hover { background: var(--sv2-accent-hover); color: #fff; } .sv2-root .sv2-btn-ghost { border: 1px solid rgba(20, 35, 28, .3); color: var(--sv2-ink); font: 600 14px var(--sv2-sans); padding: 14px 22px; border-radius: 9px; } .sv2-root .sv2-btn-ghost:hover { border-color: var(--sv2-ink); color: var(--sv2-ink); } .sv2-root .sv2-btn-plain, .sv2-root .sv2-back, .sv2-root .sv2-next { font: 600 13.5px var(--sv2-sans); color: var(--sv2-accent-text); } .sv2-root .sv2-btn-plain:hover, .sv2-root .sv2-back:hover, .sv2-root .sv2-next:hover { color: var(--sv2-accent-text-dark); } /* --- numeral tile, shared by cards, detail heroes and editorial rows --- */ .sv2-tile { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--sv2-accent) 10%, #fff); color: var(--sv2-accent-dark); font: 500 20px var(--sv2-serif); } /* --- light page hero --- */ .sv2-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 72px 40px 56px; } .sv2-hero .sv2-eyebrow { color: var(--sv2-accent-text); } .sv2-h1 { font-size: 56px; } .sv2-root .sv2-h1 em { color: var(--sv2-accent-primary); font-style: italic; } .sv2-lede { text-wrap: pretty; } .sv2-actions-secondary { margin-top: 14px; } /* rule-topped 2x2 stat grid — hero and detail views share it */ .sv2-hero-stats, .sv2-statcards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; padding-top: 6px; } .sv2-hstat, .sv2-statcard { background: none; border: 0; border-top: 2px solid var(--sv2-rule); border-radius: 0; padding: 14px 0 0; } .sv2-hstat-num, .sv2-statcard-num, .sv2-statcard-num--sm { font: 500 35px/1.15 var(--sv2-serif); letter-spacing: -.01em; color: var(--sv2-ink); } .sv2-hstat-label, .sv2-statcard-label { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--sv2-muted); } /* the old boxed stat strip is retired in favour of the ruled grid */ .sv2-band { display: none; } /* --- sector cards --- */ .sv2-cards-band { padding-top: 8px; } .sv2-root .sv2-card { padding: 0; gap: 0; overflow: hidden; border-radius: 16px; } .sv2-root .sv2-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15, 44, 33, .45); } .sv2-card-accent { display: block; height: 5px; background: var(--sv2-accent); } .sv2-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .sv2-card-top { align-items: center; } .sv2-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .sv2-card-index { color: var(--sv2-accent); letter-spacing: .18em; } .sv2-card-pages { color: var(--sv2-faint); } .sv2-card-title { font-size: 26px; } .sv2-card-foot { margin-top: 0; padding: 18px 26px; align-items: center; background: color-mix(in srgb, var(--sv2-accent) 8%, #fff); border-top: 1px solid color-mix(in srgb, var(--sv2-accent) 28%, transparent); } .sv2-card-stat { font-size: 28px; color: var(--sv2-accent-dark); } .sv2-card-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sv2-accent) 45%, transparent); color: var(--sv2-accent); display: grid; place-items: center; font-size: 15px; transition: background .18s ease, color .18s ease, border-color .18s ease; } .sv2-root .sv2-card:hover .sv2-card-arrow { background: var(--sv2-accent); border-color: var(--sv2-accent); color: #fff; } /* --- detail page header --- */ .sv2-utility { padding-bottom: 18px; border-bottom: 1px solid var(--sv2-hairline); margin-bottom: 34px; } .sv2-utility-index { color: var(--sv2-faint); } .sv2-detail-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; padding-bottom: 44px; border-bottom: 1px solid var(--sv2-hairline); } .sv2-detail-badge { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .sv2-detail-eyebrow { font: 600 11.5px var(--sv2-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sv2-accent); } .sv2-detail-h1 { font-size: 50px; letter-spacing: -.01em; text-wrap: balance; } .sv2-detail-standfirst { color: var(--sv2-accent-text-dark); } /* --- numbered editorial list --- */ .sv2-h2 { font-size: 32px; } .sv2-oppo { grid-template-columns: 72px 1fr; padding: 26px 0; } .sv2-oppo-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--sv2-accent-primary) 10%, #fff); color: var(--sv2-accent-text-dark); font: 500 20px var(--sv2-serif); } .sv2-oppo-title { font: 600 17px var(--sv2-sans); } .sv2-oppo-copy { font-size: 14.5px; max-width: 820px; } .sv2-note-label { color: var(--sv2-accent-text); } /* opportunity cards keep a terracotta index */ .sv2-oppocard-num { color: var(--sv2-accent-text); } .sv2-mapblock-eyebrow { color: var(--sv2-accent-text); } .sv2-circuit-num { color: var(--sv2-accent-text); } .sv2-bar { background: var(--sv2-accent-primary); } /* --- closing CTA panel --- */ .sv2-detail-foot { margin-top: 56px; border: 1px solid var(--sv2-hairline); border-radius: 18px; background: #fff; padding: 36px 40px; gap: 24px; } .sv2-detail-foot-copy { max-width: 560px; } .sv2-detail-foot-title { margin: 0; font: 500 26px/1.25 var(--sv2-serif); text-wrap: balance; } .sv2-detail-foot-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--sv2-muted); } .sv2-detail-foot-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } @media (max-width: 900px) { .sv2-hero, .sv2-detail-hero { grid-template-columns: 1fr; gap: 36px; } .sv2-hero { padding: 48px 20px 40px; } .sv2-h1 { font-size: 38px; } .sv2-detail-h1 { font-size: 34px; } .sv2-h2 { font-size: 26px; } .sv2-detail-foot { padding: 28px 22px; } } @media (max-width: 560px) { .sv2-hero-stats, .sv2-statcards { grid-template-columns: 1fr; gap: 22px; } .sv2-h1 { font-size: 32px; } .sv2-detail-h1 { font-size: 28px; } } /* ========================================================================== Contrast pass — WCAG AA (GIGW) on measured values Small text and button labels move to the darker shades already defined in the palette; no new colours. Large type, accent bars, tiles and the arrow glyph keep #C2701F / the sector accent, which clear the 3:1 bar that applies to large text and UI parts. white on #C2701F 3.73 -> on #A85E15 4.91 (buttons) #B4641C on cream 4.03 -> #8F5217 5.69 (labels, links) tourism accent 3.42 -> its dark 5.69 (sector eyebrows) startup accent 4.33 -> its dark 6.50 ========================================================================== */ /* 1. button labels */ .sv2-root .sv2-btn-primary, .sv2-root .sv2-btn-marigold { background: var(--sv2-accent-hover); } .sv2-root .sv2-btn-primary:hover, .sv2-root .sv2-btn-marigold:hover { background: var(--sv2-accent-text-dark); } /* 2. small terracotta text on cream */ .sv2-root a, .sv2-root .sv2-btn-plain, .sv2-root .sv2-back, .sv2-root .sv2-next, .sv2-hero .sv2-eyebrow, .sv2-root .sv2-eyebrow, .sv2-mapblock-eyebrow, .sv2-note-label, .sv2-oppocard-num, .sv2-circuit-num, .sv2-root a:hover, .sv2-root .sv2-btn-plain:hover, .sv2-root .sv2-back:hover, .sv2-root .sv2-next:hover { color: var(--sv2-accent-primary); } /* 3. sector-coded small text uses each sector's dark shade */ .sv2-detail-eyebrow, /* ========================================================================== Sector cards -- Option A, "photo band" (chosen 2026-09-03) The photograph is a band ABOVE the copy, not behind it, so the text sits on paper at full contrast and a weak replacement photograph cannot damage legibility. Each card takes its own --sv2-accent from .sv2-sector--. Photograph, alt text and caption: includes/key_sectors_data.php ========================================================================== */ .sv2-root .sv2-card { background: #fff; border: 1px solid var(--sv2-hairline); overflow: hidden; padding: 0; gap: 0; color: var(--sv2-ink); } /* --- the photograph band --- */ .sv2-card-media { position: relative; display: block; padding: 8px; background: var(--sv2-tint); } .sv2-card-media img { width: 100%; height: auto; object-fit: contain; display: block; } .sv2-root .sv2-card:hover .sv2-card-media img { transform: none; } /* the sector number rides the photograph, on a near-opaque plate so it stays legible over any image */ .sv2-card-media .sv2-tile { position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--sv2-accent-dark); font-size: 17px; } /* --- copy --- */ .sv2-root .sv2-card .sv2-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 18px; } .sv2-root .sv2-card .sv2-card-index { color: var(--sv2-accent-dark); } .sv2-root .sv2-card .sv2-card-title { color: var(--sv2-ink); font-size: 24px; } .sv2-root .sv2-card .sv2-card-copy { color: var(--sv2-muted); } /* --- the stat strip --- */ .sv2-root .sv2-card .sv2-card-foot { margin-top: auto; padding: 15px 22px 18px; background: var(--sv2-tint); border-top: 1px solid var(--sv2-row); } .sv2-root .sv2-card .sv2-card-stat { color: var(--sv2-accent-dark); font-size: 27px; } .sv2-root .sv2-card .sv2-card-stat-label { color: var(--sv2-muted); } .sv2-root .sv2-card .sv2-card-arrow { color: var(--sv2-accent-dark); border-color: color-mix(in srgb, var(--sv2-accent) 34%, transparent); background: rgba(255, 255, 255, .7); } .sv2-root .sv2-card:hover .sv2-card-arrow { background: var(--sv2-accent-dark); color: #fff; border-color: var(--sv2-accent-dark); } /* the accent stripe stays above the photograph */ .sv2-card-accent { position: relative; z-index: 1; } /* "View details" -- hidden until the card is hovered or keyboard-focused, so the resting card stays clean. The arrow is always visible, so the card never looks unclickable; the label just names the action on approach. Width, not display, is animated, so the arrow does not jump. */ .sv2-card-cta { display: inline-flex; align-items: center; gap: 10px; } .sv2-card-cta-text { font: 600 13px var(--sv2-sans); letter-spacing: .01em; color: var(--sv2-accent-dark); white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(6px); transition: max-width .28s ease, opacity .2s ease, transform .28s ease; } .sv2-root .sv2-card:hover .sv2-card-cta-text, .sv2-root .sv2-card:focus-visible .sv2-card-cta-text { max-width: 8.5em; opacity: 1; transform: translateX(0); } /* Touch screens have no hover, so show the label outright there. */ @media (hover: none) { .sv2-card-cta-text { max-width: 8.5em; opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sv2-card-media img, .sv2-card-cta-text { transition: none; } .sv2-root .sv2-card:hover .sv2-card-media img { transform: none; } } .sv2-card-index { color: var(--sv2-accent-dark); } /* Second contrast sweep, measured across 294 rendered elements on all seven views. Three more fell short; all are fixed with palette colours. .sv2-card-pages / notes #8A948C on white 3.14 -> --sv2-muted 6.42 .kss-map-eyebrow #B4641C 4.39 -> #8F5217 6.20 active map chip white on accent 3.73 -> accent-dark 6.20 The faint token stays defined for hairlines and non-text use; only the small de-emphasised labels move up to muted. */ .sv2-card-pages, .sv2-utility-index, .sv2-note, .sv2-map-caption-hint { color: var(--sv2-muted); } .sv2-mapwrap .kss-map-eyebrow { color: var(--sv2-accent-text-dark); } .sv2-mapwrap .kss-map-chip[aria-pressed="true"], .sv2-mapwrap .kss-map-chip.is-active { background: var(--sv2-accent-dark); border-color: var(--sv2-accent-dark); color: #fff; } /* Final two. The card arrow is decorative (aria-hidden) and already clears the 3:1 UI bar at 3.41, but darkening it removes the ambiguity for free. The tourism map's land copy is small text and genuinely needed the darker shade. */ .sv2-card-arrow { color: var(--sv2-accent-dark); } .sv2-mapwrap .kss-map-tourism-land-copy { color: var(--sv2-accent-dark); } /* Map label colours. These are hard-coded in the shared map stylesheet and fail AA at their 9–11px sizes; the same values are live on the legacy sectors page today, so this is inherited rather than introduced here. They are corrected from this wrapper so the shared file stays untouched. neighbours #9AA7B8 2.19 · towns #7B8A9C 3.16 · river #6F9FC4 2.53 places #C2701F 3.34 · Mega Food Park / Mechuka #FE5900 2.83 Note the last one is the site's brand orange, which measures worst of all. */ .sv2-mapwrap .kss-map-neighbours text, .sv2-mapwrap .kss-map-towns text { fill: var(--sv2-muted); } .sv2-mapwrap .kss-map-river-label { fill: #1A4A5E; } .sv2-mapwrap .kss-map-place-marker text { fill: var(--sv2-accent-text-dark); } /* --- closing band, laid out as published: heading left, copy + actions right --- */ .sv2-file-note { font-weight: 400; opacity: .8; } /* Eyebrows are authored in the published sentence case and uppercased here, so the source text stays comparable with the published page. */ .sv2-eyebrow, .sv2-mapblock-eyebrow, .sv2-detail-eyebrow, .sv2-table th { text-transform: uppercase; } .sv2-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sv2-note small { font-size: inherit; } /* ========================================================================== Opportunity breakdown — laid out as published: two columns, a bordered Project condition callout and a tinted Operating examples panel. ========================================================================== */ .sv2-oppos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sv2-hairline); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 56px; } .sv2-oppo { display: grid; grid-template-columns: 48px 1fr; gap: 0 16px; padding: 26px 0; border-bottom: 1px solid var(--sv2-hairline); align-items: start; } .sv2-oppo-num { display: block; width: auto; height: auto; background: none; border-radius: 0; font: 600 12px var(--sv2-sans); letter-spacing: .08em; color: var(--sv2-accent); padding-top: 3px; } .sv2-oppo-title { margin: 0 0 8px; font: 700 16.5px var(--sv2-sans); color: var(--sv2-ink); } .sv2-oppo-copy { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--sv2-body); max-width: none; } /* Project condition — a callout, so the caveat is not mistaken for body copy */ .sv2-qualification { margin: 14px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in srgb, var(--sv2-accent) 42%, transparent); font-size: 13.5px; line-height: 1.6; color: var(--sv2-muted); } .sv2-qualification strong { display: block; margin-bottom: 4px; font: 600 11px var(--sv2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sv2-accent-dark); } /* Operating examples — a panel, one row per business */ .sv2-examples { margin: 16px 0 0; padding: 16px 18px; border-radius: 10px; background: color-mix(in srgb, var(--sv2-accent) 7%, #fff); } .sv2-examples-label { display: block; margin-bottom: 10px; font: 600 11px var(--sv2-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sv2-accent-dark); } .sv2-examples-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sv2-root .sv2-examples-list a { display: block; color: var(--sv2-body); } .sv2-example-name { display: block; font: 600 14px var(--sv2-sans); color: var(--sv2-ink); } .sv2-example-detail { font-size: 13.5px; line-height: 1.5; } .sv2-example-link { font: 600 13px var(--sv2-sans); color: var(--sv2-accent-dark); white-space: nowrap; } .sv2-root .sv2-examples-list a:hover .sv2-example-link { text-decoration: underline; } @media (max-width: 900px) { .sv2-oppos { gap: 0; } .sv2-oppo { grid-template-columns: 38px 1fr; } } /* Detail-view stats are boxed cards with a sector-accent top edge, as published — a four-across row rather than the hero's ruled pairs. */ .sv2-statcards { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; padding-top: 0; } .sv2-statcard { background: #fff; border: 1px solid var(--sv2-hairline); border-top: 3px solid var(--sv2-accent); border-radius: 12px; padding: 20px 22px; } .sv2-statcard-num, .sv2-statcard-num--sm { font: 500 32px/1.15 var(--sv2-serif); color: var(--sv2-accent-dark); } .sv2-statcard-num--sm { font-size: 27px; } .sv2-statcard-label { margin-top: 6px; } /* the detail hero is then one column with the stat row beneath it */ .sv2-detail-hero { grid-template-columns: 1fr; gap: 32px; } .sv2-detail-hero > div:first-child { max-width: 1000px; } /* --- river-basin bars, as published: name + capacity, bar, availability --- */ .sv2-basins { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; } .sv2-basin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 240px) auto; gap: 8px 20px; align-items: center; } .sv2-basin-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; } .sv2-basin-copy strong { font: 600 14.5px var(--sv2-sans); color: var(--sv2-ink); } .sv2-basin-copy span { font-size: 13px; color: var(--sv2-muted); } .sv2-basin-copy b { color: var(--sv2-faint); font-weight: 400; } .sv2-basin-avail { font: 600 12.5px var(--sv2-sans); color: var(--sv2-accent-dark); white-space: nowrap; text-align: right; } @media (max-width: 700px) { .sv2-basin { grid-template-columns: 1fr; } .sv2-basin-avail { text-align: left; } } /* Explorer map: full geography, original symbols and a readable selection rail. Scoped to the consolidated dossiers; the legacy map layout is unchanged. */ .sv2-mapwrap .kss-map-explorer { border-radius: 16px; overflow: hidden; } .sv2-mapwrap .kss-map-body { grid-template-columns: minmax(0, 1fr) 300px; } .sv2-mapwrap .kss-map-visual { background: #edf3e9; position: relative; } .sv2-mapwrap .kss-map-canvas { background: #edf3e9; padding: 16px; } .sv2-mapwrap .kss-sector-map-svg { width: 100%; min-width: 0; background: #edf3e9; } .sv2-mapwrap .kss-map-ground { fill: #edf3e9; } .sv2-mapwrap .kss-map-district { fill: #e0e8d7; stroke: #fafcf6; stroke-width: 1.5; cursor: pointer; } .sv2-mapwrap .kss-map-district.is-relevant { fill: #b7cba7; stroke: #fafcf6; } .sv2-mapwrap .kss-map-district.is-selected { fill: #386747; stroke: #183f2a; stroke-width: 2.5; } .sv2-mapwrap .kss-map-district.is-filtered-out { opacity: .55; } .sv2-mapwrap .kss-map-label, .sv2-mapwrap .kss-map-produce-marker, .sv2-mapwrap [data-map-tourism-district], .sv2-mapwrap .kss-map-place-marker, .sv2-mapwrap .kss-map-basin-circle { pointer-events: auto; cursor: pointer; } .sv2-mapwrap .kss-map-label.is-selected { fill: #fff; paint-order: stroke; stroke: #386747; stroke-width: 3px; } .sv2-mapwrap .kss-map-produce-marker.is-filter-match, .sv2-mapwrap .kss-map-produce-marker.is-filter-match > circle { animation: none; } .sv2-mapwrap svg [role="button"]:focus-visible { outline: none; stroke: #142f22; stroke-width: 3px; filter: drop-shadow(0 0 3px #fff); } .sv2-mapwrap .kss-map-produce-marker[aria-pressed="true"] > circle { stroke: #173e28; stroke-width: 3; } .sv2-mapwrap .kss-map-list-panel { display: flex; flex-direction: column; background: #fafbf6; } .sv2-mapwrap .kss-map-selection { background: #fff; border-bottom: 1px solid #d8e2d0; padding: 24px; } .sv2-mapwrap .kss-map-selection > summary { color: #214b34; font-size: 20px; line-height: 1.35; font-weight: 700; cursor: pointer; } .sv2-mapwrap .kss-map-detail { margin: 16px 0 0; color: #465e4b; font-size: 15px; line-height: 1.75; padding: 0; border: 0; background: transparent; } .sv2-mapwrap .kss-map-list { position: static; max-height: 320px; overflow: auto; } .sv2-mapwrap .kss-map-list-heading { min-height: 44px; } .sv2-mapwrap .kss-map-list-item { min-height: 44px; } .sv2-mapwrap .kss-map-list-item[aria-pressed="true"] { background: #e9f0df; box-shadow: inset 3px 0 #386747; padding-left: 10px; } .sv2-mapwrap .kss-map-controls { display: flex; gap: 6px; justify-content: flex-end; padding: 12px 18px 0; } .sv2-mapwrap .kss-map-controls button { width: 44px; height: 44px; border: 1px solid #cbd8bf; border-radius: 7px; background: #fff; color: #2a5138; font-size: 21px; } .sv2-mapwrap .kss-map-filters { background: #f0f4e8; } .sv2-mapwrap .kss-map-legend { background: #edf3e9; } @media (max-width: 760px) { .sv2-mapwrap .kss-map-body { grid-template-columns: 1fr; } .sv2-mapwrap .kss-map-list-panel { border-left: 0; border-top: 1px solid #cbd8bf; } .sv2-mapwrap .kss-map-selection { padding: 18px; } .sv2-mapwrap .kss-map-selection:not([open]) ~ .kss-map-list-heading, .sv2-mapwrap .kss-map-selection:not([open]) ~ .kss-map-list { display: none; } .sv2-mapwrap .kss-map-canvas { padding: 8px; } .sv2-mapwrap .kss-map-produce-marker > circle { r: 12; } .sv2-mapwrap .kss-map-controls { padding: 8px 10px 0; } } .sv2-mapwrap .kss-map-district.is-relevant, .sv2-mapwrap .kss-map-district.is-selected { fill-opacity: 1; } .sv2-mapwrap .kss-map-selection-content { color: #465e4b; font-size: 15px; line-height: 1.65; } .sv2-mapwrap .kss-map-selection-content p { margin: 16px 0 0; } .sv2-mapwrap .kss-map-produce-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; } .sv2-mapwrap .kss-map-produce-list li { display: flex; align-items: center; gap: 10px; } .sv2-mapwrap .kss-map-produce-list svg { width: 30px; height: 30px; flex: 0 0 30px; } .sv2-mapwrap .kss-map-browse { margin-top: 24px; border-top: 1px solid #d8e2d0; padding-top: 16px; } .sv2-mapwrap .kss-map-browse > summary { color: #386747; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 0; } .sv2-mapwrap .kss-map-browse .kss-map-list { padding: 0; margin-top: 10px; } .sv2-awards { margin: 18px 0; padding: 14px 18px; border: 1px solid var(--sv2-line); } .sv2-awards summary { cursor: pointer; font-weight: 600; } .sv2-awards[open] summary { margin-bottom: 14px; } .sv2-extract { margin: 0 0 36px; padding: 18px 20px; background: var(--sv2-tint); border-left: 3px solid var(--sv2-accent); } .sv2-extract > a { font-weight: 600; text-decoration: underline; } .sv2-extract p { margin: 10px 0 0; font-size: 13px; line-height: 1.65; }