/* Extensions to landscape-shared.css for the rich landscape app: stat bar + always-on map + "Group by" toggle. No filter chips, no view toggle — the page has one knob ("Group by"), and the map is always visible at the top. Layout from top to bottom: title-row → subtitle → stat-bar → map → group-by → masonry → footer */ /* ---------- Map density legend ---------- */ /* Bottom-left so it sits over empty ocean and never covers the dense Europe / Asia / US-coast clusters — and clear of the top-right control cluster. JS hides it entirely on the compact (poster) map, where even a small legend crowds the little world; it returns when the map is expanded. */ .map-legend { position: absolute; bottom: 18px; left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); padding: 8px 10px; border-radius: 10px; box-shadow: 0 2px 6px rgba(15,23,42,0.06); z-index: 2; } [data-theme="dark"] .map-legend { background: rgba(15,33,71,0.8); color: rgba(255,255,255,0.8); } .map-legend-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; margin-bottom: 2px; } .map-legend-row { display: flex; align-items: center; gap: 6px; } .map-legend-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } /* ---------- Map controls (size toggle + fullscreen) ---------- */ .map-controls { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; z-index: 3; } .map-ctrl { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15,23,42,0.16); /* theme-guardrail-allow: floating map-control lift over the map; matches the .map-legend chrome in this file, no shadow token exists */ transition: color 0.15s ease, border-color 0.15s ease; } .map-ctrl svg { width: 16px; height: 16px; display: block; } .map-ctrl:hover { color: var(--text); border-color: var(--text-muted); } /* ---------- Full screen (fill the tab, not OS fullscreen) ---------- */ /* The toolbar's full-screen button asks the host page to blow this iframe up to the whole browser tab (postMessage 'landscapeMaximize'); this `is-max` class makes our own content fill that space — drop the centred max-width so the map + cards use the full width, and let the page scroll internally. Standalone (no host) this class alone is the whole effect. */ html.is-max, html.is-max body { width: 100%; height: 100%; } /* Body becomes the scroll container so a tall map scrolls WITHIN the fixed, tab-filling iframe (the window/iframe viewport itself stays put). */ html.is-max body { overflow: auto; padding: 20px; } html.is-max .outer { max-width: none; } /* Keep the toolbar (and its Exit control) reachable while scrolling a tall map. */ html.is-max .landscape-toolbar { position: sticky; top: -20px; /* cancels the body padding so it pins flush to the top */ z-index: 6; margin: -20px -8px 18px; padding: 12px 8px; background: var(--page-bg); } /* In full screen the extra room goes to the CATEGORY CARDS, not the map: the map stays at a compact, capped scale (~1.5× the poster map, never full-bleed) centred above the cards. The viewer can still blow it up via the map's own size toggle, which adds .map-full to and drops the cap. */ html.is-max.sector-mode .map-container { max-width: 720px; margin-left: auto; margin-right: auto; } html.is-max.sector-mode.map-full .map-container { max-width: none; } /* ---------- Map ---------- */ .map-container { position: relative; margin: 0 4px 18px; border-radius: 16px; padding: 14px; overflow: hidden; } [data-theme="light"] .map-container { background: #FFFFFF; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.10); } [data-theme="dark"] .map-container { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); } .map-svg { width: 100%; height: auto; display: block; } .city-dot { cursor: pointer; transition: stroke-width 0.15s ease; } .city-dot:hover { stroke-width: 2.5px; } .city-dot.dimmed { opacity: 0.18; } .city-count { pointer-events: none; font-size: 10px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(15,23,42,0.35); stroke-width: 0.5px; } .city-count.dimmed { opacity: 0.18; } .country { fill: #CDD4DF; stroke: #A6B0BF; stroke-width: 0.5; transition: opacity 0.3s ease; } [data-theme="dark"] .country { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.08); } /* Region spotlight: fade the countries outside the chosen region. */ .country.region-dim { opacity: 0.3; } .map-glow { transition: opacity 0.2s ease; } .map-dot { transition: r 0.18s ease, opacity 0.2s ease; cursor: pointer; } .map-dot.dimmed, .map-glow.dimmed { opacity: 0.12 !important; } /* Drill-down company logo pins (shown when zoomed past LOGO_K on the World map). */ .logos-layer { display: none; } .logo-pin { cursor: pointer; } .logo-pin-bg { fill: #FFFFFF; /* theme-guardrail-allow: logo pins sit on a pale tile in both themes (logo-tile convention) */ stroke: rgba(15,23,42,0.16); /* theme-guardrail-allow: subtle tile edge, both themes */ stroke-width: 0.6; } .logo-pin:hover .logo-pin-bg { stroke: rgba(37,99,235,0.95); /* theme-guardrail-allow: brand-blue hover ring */ stroke-width: 1.6; } .logo-pin-fallback { fill: #E2E8F0; /* theme-guardrail-allow: neutral fallback tile, both themes */ } .logo-pin-initial { font-size: 11px; font-weight: 700; fill: #475569; /* theme-guardrail-allow: muted initial on fallback tile */ pointer-events: none; } @keyframes dotPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1.0; } } .dot-pulse { animation: dotPulse 2.5s ease-in-out infinite; } .map-tooltip { position: absolute; pointer-events: none; background: rgba(15,23,42,0.95); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,0.25); opacity: 0; transform: translate(-50%, -110%); transition: opacity 0.12s ease; z-index: 10; } .map-tooltip::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 8px; height: 8px; background: rgba(15,23,42,0.95); transform: translateX(-50%) rotate(45deg); } .map-tooltip strong { font-weight: 700; } .map-tooltip .meta { opacity: 0.7; font-size: 11px; margin-top: 2px; font-weight: 400; } /* ---------- View toolbar: group-by tabs (left) + full screen (right) ---------- */ .landscape-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px 18px; } /* Full-screen control — governs the whole view, so it sits here rather than on the map; styled to match the subtle, ghosted map controls. */ .landscape-fs-btn { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .landscape-fs-btn svg { width: 17px; height: 17px; display: block; } .landscape-fs-btn:hover { color: var(--text); border-color: var(--text-muted); } .landscape-fs-btn.is-active { color: var(--text); border-color: var(--text-muted); } /* ---------- Group-by pills ---------- */ .group-by-bar { display: inline-flex; margin: 0; padding: 4px; border-radius: 999px; gap: 2px; } [data-theme="light"] .group-by-bar { background: rgba(15,23,42,0.06); border: 1px solid rgba(15,23,42,0.06); } [data-theme="dark"] .group-by-bar { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); } .group-by-btn { appearance: none; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 8px 16px; border-radius: 999px; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; flex-shrink: 0; } /* Mobile: tighten padding so the pills fit, and let each bar use the FULL row width. The old `calc(100% - 24px)` cap was ~24px narrower than the content, so the last tab/pill was clipped mid-label ("World ma…", "Fundi…") even though everything would otherwise fit. Full width = no clip in the common case; the long Scatter lenses still scroll horizontally. */ @media (max-width: 480px) { .group-by-bar { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .group-by-bar::-webkit-scrollbar { display: none; } .group-by-btn { padding: 7px 10px; font-size: 12px; } } .group-by-btn:hover { color: var(--text); } [data-theme="light"] .group-by-btn.active { background: #FFFFFF; color: var(--text); box-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06); } [data-theme="dark"] .group-by-btn.active { background: rgba(255,255,255,0.12); color: var(--text); } /* The Group-by control is a FILTER (not a destination), so its active pill is accented rather than neutral-white — the cue that tells it apart from the view tabs at a glance. (Scoped to .group-by-wrap so the view bar stays neutral.) Eyebrow blues per THEME-GUARDRAILS; this stylesheet ships without the central token layer, so they're literal with the standard allowance. */ [data-theme="light"] .group-by-wrap .group-by-btn.active { background: #FFFFFF; /* theme-guardrail-allow: raised active pill, matches the view-tab active surface */ color: #3E64E0; /* theme-guardrail-allow: eyebrow accent marks the active filter (light) */ box-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06); /* theme-guardrail-allow: active-pill lift, matches the view-tab active shadow */ } [data-theme="dark"] .group-by-wrap .group-by-btn.active { background: rgba(132,173,255,0.18); /* theme-guardrail-allow: soft eyebrow-blue active fill (dark) */ color: #84ADFF; /* theme-guardrail-allow: paired eyebrow accent (dark) */ } .group-by-wrap .group-by-btn:hover { color: #3E64E0; } /* theme-guardrail-allow: eyebrow accent hover hint (light) */ [data-theme="dark"] .group-by-wrap .group-by-btn:hover { color: #84ADFF; } /* theme-guardrail-allow: paired eyebrow accent hover (dark) */ /* ---------- Two-cluster control bar: View tabs (left) + Group-by filter (right) ---------- */ .toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; } /* Right cluster: Group-by control + full-screen, pinned to the toolbar's end. Wraps under the view tabs on narrow widths rather than overflowing. */ .toolbar-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; min-width: 0; } .group-by-wrap { display: inline-flex; align-items: center; gap: 9px; } .group-by-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); opacity: 0.8; white-space: nowrap; } /* Group-by + full-screen drop below the view tabs together once the row is tight, so the right cluster never collides with the primary tabs. */ @media (max-width: 720px) { .landscape-toolbar { flex-wrap: wrap; } /* Both clusters take their own full-width row and align to the SAME left edge, so the Group-by pills sit flush under the View tabs instead of floating right (which read as an awkward indented stagger on phones). The full width also lets each pill bar use the whole row (no clip). */ .toolbar-left, .toolbar-right { width: 100%; } .toolbar-right { justify-content: flex-start; } /* Let a long pill set (e.g. the Scatter lenses) scroll inside its bar rather than shoving the full-screen button off the row… */ .toolbar-right .group-by-wrap { min-width: 0; } /* …and keep that full-screen toggle pinned to the row's right edge. */ .toolbar-right .landscape-fs-btn { margin-left: auto; } } @media (max-width: 560px) { .toolbar-left { gap: 8px 12px; } .group-by-label { display: none; } /* save room for the pills on phones */ } /* ---------- World map view: large, pan/zoomable map ---------- */ /* The map fills the width at its natural aspect (height = width ÷ projection aspect). It must NOT use vh units: this chart lives in an auto-height iframe whose height tracks its content, so a vh height feeds back on itself and balloons the map (a long map map could blow it up to thousands of px). */ .map-container.map-worldview .map-svg { width: 100%; height: auto; max-height: none; } .map-container.map-worldview { cursor: grab; } .map-container.map-worldview:active { cursor: grabbing; } /* The "Zoom to" region selector is NOT a floating map overlay anymore — it rides in the toolbar's right cluster (same slot as Group by) and reuses the .group-by-wrap markup + styling verbatim, so no region-specific rules are needed. Only the +/- zoom buttons still float over the map. */ /* +/- zoom buttons, bottom-right of the map (drag to pan; no wheel-zoom). */ .map-zoom { position: absolute; bottom: 16px; right: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; } .map-zoom-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15,23,42,0.16); /* theme-guardrail-allow: floating map-control lift, matches .map-ctrl */ transition: color 0.15s ease, border-color 0.15s ease; } .map-zoom-btn svg { width: 17px; height: 17px; display: block; } .map-zoom-btn:hover { color: var(--text); border-color: var(--text-muted); } /* ---------- Stats view ---------- */ /* The Stats view is a STACK of separate, full-width islands — the treemap, then the value-creation charts. There is no outer wrapper card: .landscape-treemap is just a transparent flex column so each island reads as its own panel (instead of an island-inside-an-island). */ .landscape-treemap { display: flex; flex-direction: column; gap: 18px; margin: 0 4px 18px; } /* Treemap island — a fixed-light data canvas in BOTH themes (light tiles + canvas, dark labels — like the sector "largest rounds" treemap) so the soft pastel tints + dark header/name text always read. */ .treemap-island { border-radius: 16px; padding: 14px; } [data-theme="light"] .treemap-island { background: #FFFFFF; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.10); } [data-theme="dark"] .treemap-island { background: #FFFFFF; /* theme-guardrail-allow: fixed-light treemap canvas in both themes */ border: 1px solid rgba(255,255,255,0.12); /* theme-guardrail-allow: fixed-light treemap canvas border */ box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 12px 32px -8px rgba(0,0,0,0.35); /* theme-guardrail-allow: card lift, matches .group-card dark */ } .treemap-surface { position: relative; width: 100%; min-height: 520px; } .tm-sec-bg, .tm-sec-hdr, .tm-child { position: absolute; overflow: hidden; } .tm-sec-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; font-weight: 700; color: #1E293B; /* theme-guardrail-allow: dark header ink on the soft-tint band; treemap is fixed-light in both themes */ } .tm-sec-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; } .tm-sec-stat { font-size: 12px; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; } .tm-sec-pct { opacity: 0.75; font-weight: 600; } /* Section-level PNG download — ONE button per Stats panel (the whole treemap, and each value-creation chart). Reuses the base .card-png-btn (absolute, top-right, hover-revealed; landscape-shared.css); these rules just give each panel a positioning context + a hover trigger, plus a fixed-light variant for the always-light treemap island. */ .treemap-island, .vc-stat-card { position: relative; } .treemap-island:hover > .card-png-btn, .vc-stat-card:hover > .card-png-btn, .card-png-btn:focus-visible { opacity: 1; } /* World-map view carries the same one-button export (top-right, hover-revealed). The map is already position:relative and its size toggle is hidden in this view, so the corner is clear. The button inherits the page theme tokens, so it reads on the pale (light) / translucent (dark) map card in both modes. */ .map-container.map-worldview:hover > .card-png-btn, .map-container.map-worldview > .card-png-btn:focus-visible { opacity: 1; } /* The treemap island is a fixed-light canvas in BOTH themes, so its button is literal light values (not theme tokens) to read on the light island. */ .card-png-btn--island { color: #475569; /* theme-guardrail-allow: fixed-light treemap-island button ink */ background: rgba(255,255,255,0.92); /* theme-guardrail-allow: fixed-light treemap-island button chip */ border: 1px solid rgba(15,23,42,0.16); /* theme-guardrail-allow: fixed-light treemap-island button border */ } .card-png-btn--island:hover { color: #0F172A; border-color: rgba(15,23,42,0.42); } /* theme-guardrail-allow: fixed-light treemap-island button hover ink */ .tm-child { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px 6px; border-radius: 4px; transition: transform 0.12s ease, box-shadow 0.12s ease; } [data-theme="light"] .tm-child { background: #FFFFFF; } [data-theme="dark"] .tm-child { background: rgba(255,255,255,0.08); } .tm-child:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.12); z-index: 5; } .tm-child-title { font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 2px; color: #1E293B; /* theme-guardrail-allow: dark title ink on the fixed-light treemap tile */ } .tm-child-count { font-size: 11.5px; font-weight: 700; /* Treemap tiles use a fixed light fill in both themes, so a fixed slate keeps the count legible on dark too (var(--text-muted) is too pale here → vanishes). */ color: #64748B; /* theme-guardrail-allow: fixed slate count on the always-light treemap tile; no landscape token reads in both themes */ font-variant-numeric: tabular-nums; } /* ---------- Treemap company pills ---------- */ /* Bigger, readable company name-pills (logo + name) inside each segment tile, like the Market map view. The tile fill is fixed light in both themes, so these colours are theme-independent. */ .tm-child.has-pills { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; padding: 7px 8px; gap: 6px; } .tm-child-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex: 0 0 auto; min-height: 0; } .tm-child.has-pills .tm-child-title { margin: 0; font-size: 12px; flex: 1 1 auto; } .tm-child.has-pills .tm-child-count { flex: 0 0 auto; font-size: 11px; } .tm-pillwrap { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; overflow: hidden; min-height: 0; } .tm-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; line-height: 1; padding: 3px 9px 3px 3px; border-radius: 999px; max-width: 100%; background: #FFFFFF; /* theme-guardrail-allow: pale pill on the soft-tint treemap box (fixed-light in both themes) */ border: 1px solid rgba(15,23,42,0.08); /* theme-guardrail-allow: hairline so the pale pill reads on the tint */ box-shadow: 0 1px 1.5px rgba(15,23,42,0.05); /* theme-guardrail-allow: faint pill lift on the fixed-light treemap box */ color: #1E293B; /* theme-guardrail-allow: pill ink on the fixed-light treemap box */ } .tm-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; } .tm-pill-logo { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 3px; object-fit: contain; background: rgba(128,128,128,0.10); /* theme-guardrail-allow: neutral logo-tile fill, matches .pill-logo */ } .tm-pill-initial { display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: #fff; /* theme-guardrail-allow: initial-letter ink on a colour-filled square, matches .pill-initial */ line-height: 1; } .tm-pill-more { background: transparent; color: #64748B; font-weight: 700; } /* theme-guardrail-allow: muted "+N" chip on the fixed-light treemap tile */ /* Blurred teaser pills — same paywall cue as the Market map's blurred pills: the logo fades to a muted placeholder, the name goes behind a CSS blur so the shape reads but the word doesn't. Fixed-light treemap, so literals + allow. */ .tm-pill.blurred { cursor: default; user-select: none; } .tm-pill.blurred .tm-pill-name { filter: blur(4px); color: #64748B; opacity: 0.85; } /* theme-guardrail-allow: blurred teaser ink on the fixed-light treemap tile */ .tm-pill.blurred .tm-pill-logo { filter: grayscale(0.6) saturate(0.6); opacity: 0.5; } /* "Hottest" pills — high Dealroom Signal, still lean on capital. Orange ring + soft glow + 🔥, the same accent the Scatter view stars. Fixed-light treemap in both themes, so literal orange + allow. */ .tm-pill.hot { border: 1.5px solid #F97316; /* theme-guardrail-allow: hot ring on the fixed-light treemap pill */ background: #FFF4EC; /* theme-guardrail-allow: warm tint behind a hot pill (fixed-light treemap) */ box-shadow: 0 0 0 3px rgba(249,115,22,0.18); /* theme-guardrail-allow: hot glow ring */ font-weight: 700; color: #7C2D12; /* theme-guardrail-allow: deep-orange ink keeps a hot pill legible on the warm tint */ } .tm-pill.hot:hover { box-shadow: 0 0 0 3px rgba(249,115,22,0.18), 0 3px 8px rgba(15,23,42,0.16); } /* theme-guardrail-allow: hot pill lift */ .tm-fire { font-size: 11px; line-height: 1; flex: 0 0 auto; margin-left: 1px; } /* "🔥 Hottest" legend above the treemap tiles. */ .tm-hot-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; } .tm-hot-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1.5px solid #F97316; /* theme-guardrail-allow: hot chip on the fixed-light treemap island */ background: #FFF4EC; /* theme-guardrail-allow: warm tint behind the hot legend chip */ color: #7C2D12; /* theme-guardrail-allow: deep-orange ink on the warm chip */ box-shadow: 0 0 0 3px rgba(249,115,22,0.16); /* theme-guardrail-allow: hot chip glow */ } .tm-hot-note { font-size: 12.5px; color: #64748B; } /* theme-guardrail-allow: muted note on the fixed-light treemap island */ /* ---------- Paywalled pills + demo CTA ---------- */ /* Wrapper so the tooltip can anchor to an absolutely-positioned peer without breaking the masonry pill flow. */ .pill-wrap { position: relative; display: inline-flex; } button.company-pill { appearance: none; font-family: inherit; cursor: default; } button.company-pill:focus-visible { outline: 2px solid var(--accent, #3B82F6); outline-offset: 2px; } /* Blurred pills — the logo fades to a muted placeholder, the name goes behind a CSS blur so the shape is visible but the word isn't. */ .company-pill.blurred { cursor: not-allowed; pointer-events: none; user-select: none; } .company-pill.blurred .pill-logo, .company-pill.blurred .pill-initial { filter: grayscale(0.6) saturate(0.6); opacity: 0.55; } .company-pill.blurred .pill-name { filter: blur(4.5px); color: var(--text-muted); opacity: 0.9; letter-spacing: -0.01em; } /* Book-a-demo CTA that takes the place of "and N more". */ .book-demo-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; padding: 7px 12px 7px 11px; border-radius: 999px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; white-space: nowrap; } [data-theme="light"] .book-demo-btn { background: var(--text); color: var(--page-bg); } [data-theme="dark"] .book-demo-btn { background: #fff; color: #0F2147; } .book-demo-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.18); } .book-demo-btn svg { width: 12px; height: 12px; flex-shrink: 0; } /* ---------- Company tooltip (hover reveals rich info) ---------- */ /* Uses position: fixed to escape .group-card overflow:hidden and CSS column clipping in masonry. Positioned by JS relative to viewport. */ .pill-tooltip { position: fixed; /* Park off-screen by default so hidden tooltips don't contribute to page scroll width (fixed-position elements can still extend the viewport scroll bounds). JS repositions on hover. */ top: -9999px; left: -9999px; z-index: 10000; min-width: 240px; max-width: 320px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s; white-space: normal; text-align: left; } [data-theme="light"] .pill-tooltip { background: #FFFFFF; color: var(--text); border: 1px solid rgba(15,23,42,0.10); box-shadow: 0 10px 30px -8px rgba(15,23,42,0.25), 0 2px 6px rgba(15,23,42,0.06); } [data-theme="dark"] .pill-tooltip { background: #132A55; color: var(--text); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5); } /* JS toggles .visible on mouseenter — position: fixed means it escapes any overflow: hidden ancestor. */ .pill-tooltip.visible { opacity: 1; visibility: visible; } .pill-tt-name { font-size: 14px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.01em; } .pill-tt-tagline { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; } .pill-tt-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } .pill-tt-row { display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; } .pill-tt-ico { flex-shrink: 0; width: 14px; text-align: center; font-size: 11px; } .pill-tt-links { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 2px; } .pill-tt-site { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--accent, #3B82F6); text-decoration: none; } .pill-tt-site:hover { text-decoration: underline; } /* Primary link to the company's Dealroom (Next Gen) profile. */ .pill-tt-dr { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent, #3B82F6); /* theme-guardrail-allow: accent link, mirrors sibling .pill-tt-site; chart CSS has no central theme tokens */ text-decoration: none; } .pill-tt-dr:hover { text-decoration: underline; } /* ---------- Cross-highlight from map → cards ---------- */ .company-pill { transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .company-pill.highlighted { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); transform: translateY(-1px); } [data-theme="dark"] .company-pill.highlighted { border-color: #fff; box-shadow: 0 0 0 2px #fff; } /* Preview mode: when embedded in a small iframe (resources page thumbnails), hide excess pills to prevent the browser from choking on 1000+ elements. The iframe is 320% scaled to a 200px container, so effective height is ~640px. Scoped to :not(.is-max) so a fill-the-tab maximize on a short laptop viewport keeps the map, toolbar (and its Exit button) and all cards. */ @media (max-height: 760px) { html:not(.is-max) .map-container { display: none !important; } html:not(.is-max) .landscape-toolbar { display: none !important; } html:not(.is-max) .stat-bar { display: none !important; } html:not(.is-max) .pills-wrap .company-pill:nth-child(n+9) { display: none !important; } html:not(.is-max) .pills-wrap .more-btn { display: none !important; } html:not(.is-max) .subgroup-card .pills-wrap .company-pill:nth-child(n+5) { display: none !important; } html:not(.is-max) .group-card:nth-child(n+5) { content-visibility: hidden; height: 0; overflow: hidden; } } /* ---------- Compact category headers ---------- Tighten the nested super-group header so the title doesn't eat three rows (company counts were removed from the boxes — title only). */ .group-card-nested .group-header { padding-bottom: 12px; margin-bottom: 12px; } .group-header-left { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .group-card-nested .group-name { font-size: 19px; } .group-subtitle { margin: -4px 0 12px; font-size: 12.5px; } .subgroup-header { margin-bottom: 9px; } /* ---------- Poster (default view) ---------- The world map sits in the centre column; the category groups balance into the columns around it (positions assigned by JS in layoutPoster()). No new colours or borders — this only arranges the existing cards. */ .masonry.is-poster { display: flex; gap: 18px; align-items: flex-start; column-count: unset; } .poster-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; } .poster-col-center { flex: 1.6 1 0; } /* 4+ super-groups: level the columns into a uniform grid so the centre cards stop reading as mismatched-width (set in layoutPoster). The map rides along at the regular column width. */ .masonry.is-poster.poster-uniform .poster-col-center { flex: 1 1 0; } .poster-col-center .map-container { margin: 0; } /* Let the map size to its natural aspect ratio inside the centre column. */ .poster-col-center .map-svg { height: auto; min-height: 200px; } @media (max-width: 920px) { .masonry.is-poster { flex-direction: column; } .poster-col, .poster-col-center { flex: 1 1 auto; width: 100%; } .poster-col-center .map-svg { height: auto; min-height: 0; } /* Mapless balanced columns (layoutBalancedColumns) have no centre map to give full width to, so they stay side-by-side here instead of stacking — the JS column count already drops to 1 on a phone, which reads as a single stack. */ .masonry.is-poster.is-balanced { flex-direction: row; } .masonry.is-poster.is-balanced .poster-col { flex: 1 1 0; width: auto; } } /* ---------- Stats view: value-creation charts (combined EV + VC funding) ---------- */ /* Sibling islands of the treemap inside the .landscape-treemap stack — no own margin (the stack's flex gap spaces them) so they align flush with the treemap island and the map above. */ .vc-charts { display: flex; flex-direction: column; gap: 18px; margin: 0; } .vc-stat-card { border-radius: 16px; padding: 20px 22px 16px; overflow: hidden; } [data-theme="light"] .vc-stat-card { background: #FFFFFF; /* theme-guardrail-allow: card surface, matches .group-card */ border: 1px solid rgba(15,23,42,0.08); /* theme-guardrail-allow: card border, matches .group-card */ box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -8px rgba(15,23,42,0.10); /* theme-guardrail-allow: card lift, matches .group-card */ } [data-theme="dark"] .vc-stat-card { background: rgba(255,255,255,0.05); /* theme-guardrail-allow: card surface, matches .group-card */ border: 1px solid rgba(255,255,255,0.10); /* theme-guardrail-allow: card border, matches .group-card */ } .vc-stat-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--eyebrow, #3E64E0); margin-bottom: 4px; /* theme-guardrail-allow: eyebrow token fallback */ } [data-theme="dark"] .vc-stat-eyebrow { color: #84ADFF; } /* theme-guardrail-allow: paired eyebrow ink on dark, matches THEME-GUARDRAILS eyebrow token */ .vc-stat-title { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--text); line-height: 1.2; } .vc-stat-sub { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 5px 0 12px; max-width: 760px; } /* EV chart header: eyebrow/title/subtitle on the left, the "Split by" toggle (Geography ⇄ Segment) pinned to the top-right at the subtitle's height. The toggle reuses the .group-by-wrap filter language. */ .vc-ev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 12px; } .vc-ev-head-text { flex: 1 1 auto; min-width: 0; } .vc-ev-head-text .vc-stat-sub { margin-bottom: 0; } /* the header row owns the bottom gap */ .vc-ev-split { flex-shrink: 0; margin: 0; } /* Narrow cards: stack the toggle under the subtitle rather than squeezing it against a many-line wrapped subtitle. */ @media (max-width: 560px) { .vc-ev-head { flex-direction: column; align-items: flex-start; } } .vc-svg { width: 100%; max-width: 100%; height: auto; display: block; overflow: hidden; } .vc-grid { stroke: var(--border); stroke-width: 1; } .vc-axis { font-size: 12px; font-weight: 600; fill: var(--text-muted); } .vc-bar-total { font-size: 13px; font-weight: 800; fill: var(--text); } .vc-legend-name { font-size: 12.5px; font-weight: 600; fill: var(--text); } .vc-legend-val { font-size: 12.5px; font-weight: 700; fill: var(--text-muted); } .vc-fund-bar { fill: #3B82F6; } /* theme-guardrail-allow: legacy single-series VC-funding bar hue */ .vc-fund-seg { stroke: var(--card-bg); stroke-width: 1; } /* Stacked-EV bars: a 1px card-bg stroke draws the subtle separator between stacked country segments (and a hairline frame around each bar). */ .vc-ev-seg { stroke: var(--card-bg); stroke-width: 1; } /* Direct end-of-bar labels (desktop) for the latest stack. */ .vc-leader { stroke: var(--border); stroke-width: 1; } .vc-dlabel { font-size: 13px; } .vc-dlabel-val { fill: var(--text-muted); font-weight: 600; } /* ---------- Scatter view: valuation × Dealroom Signal ---------- */ /* Single full-width island (reuses .vc-stat-card chrome) with one SVG plot. No bubble sizes — every dot is uniform; colour carries the meaning. */ .landscape-scatter { display: flex; flex-direction: column; margin: 0 4px 18px; } .scatter-card { position: relative; } .scatter-plot { position: relative; width: 100%; margin-top: 2px; } .scatter-svg { width: 100%; height: auto; display: block; overflow: visible; } .sc-frame { fill: var(--sc-panel); stroke: none; } /* subtle plot-area panel (no outline) — gridlines read on top without a border doubling them */ /* Frontier zone — high Signal, lean capital (top-left). Soft orange wash. */ .sc-frontier { fill: rgba(249,115,22,0.07); } /* theme-guardrail-allow: frontier-zone wash, chart accent */ [data-theme="dark"] .sc-frontier { fill: rgba(251,146,60,0.10); } /* theme-guardrail-allow: frontier-zone wash on dark */ .sc-frontier-lab { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; fill: #C2410C; /* theme-guardrail-allow: frontier label ink (orange), reads on the soft wash (light) */ } [data-theme="dark"] .sc-frontier-lab { fill: #FDBA74; } /* theme-guardrail-allow: frontier label ink on dark */ .sc-grid { stroke: var(--border); stroke-width: 1; } .sc-grid-v { stroke-dasharray: 2 4; opacity: 0.7; } .sc-grid-zero { stroke: var(--text-muted); stroke-width: 1.2; opacity: 0.55; } /* the 0% baseline in the FTE-growth lens */ .sc-axis { font-size: 12px; font-weight: 600; fill: var(--text-muted); font-variant-numeric: tabular-nums; } .sc-axis-title { font-size: 12.5px; font-weight: 700; fill: var(--text-muted); letter-spacing: 0.01em; } .sc-dot { cursor: pointer; outline: none; } .sc-dot circle { transition: r 0.1s ease; } .sc-halo { opacity: 0.16; } .sc-dot:hover circle:last-of-type, .sc-dot:focus-visible circle:last-of-type { r: 7; } .sc-label { font-weight: 700; paint-order: stroke; stroke: var(--card-bg); stroke-width: 3px; stroke-linejoin: round; } .sc-label.is-est { font-weight: 700; } /* Hover tooltip — theme-aware floating card anchored inside the scatter island. */ .scatter-tooltip { position: absolute; z-index: 20; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.3; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 22px -6px rgba(15,23,42,0.28); /* theme-guardrail-allow: tooltip drop shadow, matches the card-lift shadows above */ max-width: 240px; } .sc-tip-name { display: block; font-weight: 800; margin-bottom: 2px; } .sc-tip-row { display: block; color: var(--text-muted); font-variant-numeric: tabular-nums; } .sc-tip-row b { color: var(--text); font-weight: 700; margin-left: 4px; } /* On phones the whole SVG scales down to ~⅓, so axis/frontier text is set in bigger viewBox units to stay legible (the SVG coordinate system, not CSS px). */ @media (max-width: 640px) { .sc-axis { font-size: 20px; } .sc-axis-title { font-size: 21px; } .sc-frontier-lab { font-size: 17px; } } /* Market maps ship their own "Download image" / "Download PDF" buttons, so the agent-charts auto-injected PNG button is redundant and overlaps them. The data-agent-no-png attribute tells a fresh agent-charts.js to skip it; this rule guarantees it stays hidden even if that (un-versioned) script is edge-cached stale. */ .card[data-agent-no-png] .png-btn[data-agent-png] { display: none !important; }