/* mafia-chart-base.css — the founder-mafia chart family stylesheet. * * Single source of the family palette (Embed Contract §1: the canvas pair is * defined once per family, never re-hardcoded per chart). Every generated * /charts/-mafia.html links this file; the chart's inline JSX styles * reference only the --m-* custom properties, so a data-theme flip on * restyles the whole chart live — no re-render, view-transition state intact. * * Light is the default (standalone opens); the embed-contract shim sets * data-theme from ?theme= at parse time and from postMessage afterwards. * Regenerate the charts with: node scripts/build-mafia-charts.mjs */ :root { /* contract canvas pair — must equal the page's --chart-canvas */ --m-canvas: #F1F4F8; --m-card: #FFFFFF; --m-card-alt: #F5F6F8; --m-border: #E6E8EC; --m-border-strong: #D5D9E0; --m-text: #0B1A3B; --m-text-muted: #5A6478; --m-text-faint: #8A93A6; --m-text-veryfaint: #B8BFCC; --m-accent: #FF6B35; --m-chip: #FFFFFF; /* logo chips stay white in both themes */ --m-pill: #FFFFFF; /* company name + valuation pill under photos */ --m-seg-bg: rgba(15,23,42,0.06); --m-seg-border: rgba(15,23,42,0.06); --m-seg-active: #FFFFFF; --m-seg-shadow: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06); --m-map-land: #D9DEE8; --m-map-stroke: #B6BFCC; --m-legend-bg: rgba(255,255,255,0.95); --m-legend-border: rgba(15,23,42,0.08); --m-legend-shadow: 0 2px 8px rgba(15,23,42,0.06); --m-card-fade-0: rgba(255,255,255,0); --m-card-fade-1: rgba(255,255,255,0.95); --m-tip-border: rgba(15,23,42,0); --m-shadow-photo: 0 2px 6px rgba(11,26,59,0.06); --m-shadow-pill: 0 2px 6px rgba(11,26,59,0.1); --m-shadow-badge: 0 1px 4px rgba(11,26,59,0.18); --m-scrollbar: rgba(11,26,59,0.15); } [data-theme="dark"] { --m-canvas: #001234; --m-card: #0A1F44; --m-card-alt: #0E2348; --m-border: #22365C; --m-border-strong: #2E4470; --m-text: #E8EEF9; --m-text-muted: #9FB0CC; --m-text-faint: #7488A8; --m-text-veryfaint: #51648A; --m-pill: #13294E; --m-seg-bg: rgba(255,255,255,0.07); --m-seg-border: rgba(255,255,255,0.08); --m-seg-active: #1B3768; --m-seg-shadow: 0 1px 3px rgba(0,0,0,0.40); --m-map-land: #16294E; --m-map-stroke: #2B4068; --m-legend-bg: rgba(10,31,68,0.93); --m-legend-border: rgba(255,255,255,0.10); --m-legend-shadow: 0 2px 8px rgba(0,0,0,0.35); --m-card-fade-0: rgba(10,31,68,0); --m-card-fade-1: rgba(10,31,68,0.95); --m-tip-border: rgba(255,255,255,0.14); --m-shadow-photo: 0 2px 6px rgba(0,0,0,0.35); --m-shadow-pill: 0 2px 6px rgba(0,0,0,0.45); --m-shadow-badge: 0 1px 4px rgba(0,0,0,0.5); --m-scrollbar: rgba(255,255,255,0.18); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--m-canvas);min-height:100%} body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--m-text)} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--m-scrollbar);border-radius:4px} ::-webkit-scrollbar-track{background:transparent} /* Dual-mode Dealroom wordmark in the chart footer. Class tokens deliberately differ from the host page's emblem selectors (.logo-light/.logo-dark) — the mafia artifact keeps its own logo on standalone AND embedded views. */ .m-logo-dark{display:none} [data-theme="dark"] .m-logo-light{display:none} [data-theme="dark"] .m-logo-dark{display:block} /* ── Masthead ────────────────────────────────────────────────────────── Identity (headline + dek) on the left rail, the cohort readout on the right, sharing one baseline. Everything below — the control row and the figure card — hangs off the same left rail, so the top reads as one column instead of the three alignment axes it used to have (left title, right boxed stats, centred tabs). */ .m-masthead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 22px; } /* Grow into the space the readout doesn't need, but never squeeze it: past ~420px of headline the stats drop to their own line instead. */ .m-ident { flex: 1 1 420px; min-width: 0; } .m-masthead .title { margin: 0; font-size: clamp(27px, 1.1rem + 1.7vw, 38px); font-weight: 900; line-height: 1.06; letter-spacing: -0.03em; color: var(--m-text); text-wrap: balance; } /* The company's brand accent is the only colour event in the header — the family's signature device. Padding is in em so the chip tracks the headline's clamped size instead of shrinking away from it. */ .m-masthead .m-brand { display: inline-block; padding: 0.06em 0.26em 0.11em; border-radius: 0.18em; color: #fff; /* theme-guardrail-allow: label on the company's own brand accent, identical in both modes */ } .m-masthead .subtitle { margin: 8px 0 0; /* Wide enough that even the longest tagline in the estate ("Alumni who left VeriSign Authentication Services and…", 83 chars) sits on one line rather than wrapping to a one-word orphan; capped so a longer one still breaks at a readable measure. */ max-width: min(78ch, 100%); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--m-text-muted); } /* Four measures of one cohort, separated by hairlines rather than parcelled into a bordered box. Tabular figures keep the numbers on a common grid. */ .m-stats { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 0; } .m-stats .m-stat { padding: 0 clamp(14px, 1.4vw, 22px); border-left: 1px solid var(--m-border); text-align: left; } .m-stats .m-stat:first-child { padding-left: 0; border-left: 0; } .m-stats .m-stat:last-child { padding-right: 0; } .m-stat-v { display: block; margin: 0; font-size: clamp(20px, 0.7rem + 0.9vw, 26px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; color: var(--m-text); font-variant-numeric: tabular-nums; } .m-stat-l { display: block; margin: 4px 0 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--m-text-faint); white-space: nowrap; } /* ── Control row: grouping on the left rail, export on the right ── */ .m-tabs { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; } .m-groupby { display: flex; align-items: center; gap: 12px; min-width: 0; } .m-groupby-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--m-text-faint); white-space: nowrap; } .m-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--m-seg-bg); border: 1px solid var(--m-seg-border); } .m-seg .view-toggle-btn { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; color: var(--m-text-muted); background: transparent; transition: color .18s ease, background .18s ease; } .m-seg .view-toggle-btn:hover { color: var(--m-text); } .m-seg .view-toggle-btn.active { color: var(--m-text); background: var(--m-seg-active); box-shadow: var(--m-seg-shadow); } .m-seg .view-toggle-btn:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; } /* Header PNG button. js/agent-charts.js styles its auto-injected button as `position:absolute; top:12px; right:12px` on the card — which landed it on top of the stats. #root carries data-agent-no-png so that one is never injected; this is its deliberate replacement, and these rules (one class more specific) undo the absolute placement and the hover-only reveal that the agent-charts stylesheet would otherwise still apply. */ .m-tabs .png-btn.m-png { position: static; opacity: 1; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-text-muted); background: transparent; border: 1px solid var(--m-border); transition: color .18s ease, background .18s ease, border-color .18s ease; } .m-tabs .png-btn.m-png svg { width: 13px; height: 13px; } .m-tabs .png-btn.m-png:hover { color: var(--m-text); background: var(--m-card-alt); border-color: var(--m-border-strong); transform: none; } .m-tabs .png-btn.m-png:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; } .m-tabs .png-btn.m-png[data-loading="1"] { opacity: .6; pointer-events: none; } /* Mobile: view toggle bar (5 tabs: Grid/Network/Timeline/Map/Breakdown) totals ~390px and overflows the 390px mobile viewport. Make scrollable. */ .view-toggle-bar { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .view-toggle-bar::-webkit-scrollbar { display: none; } .view-toggle-btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 640px) { .view-toggle-btn { padding: 10px 10px !important; font-size: 12px !important; } /* Stats wrap to a 2×2 grid on a phone; the first cell of each row loses its divider so a hairline never dangles at the start of a line. */ .m-masthead { align-items: flex-start; gap: 16px; margin-bottom: 18px; } .m-stats { gap: 14px 0; } .m-stats .m-stat { flex: 0 0 50%; padding-left: 0; padding-right: 12px; border-left: 0; } .m-stats .m-stat + .m-stat { padding-left: 14px; border-left: 1px solid var(--m-border); } .m-stats .m-stat:nth-child(odd) { padding-left: 0; border-left: 0; } .m-groupby { gap: 8px; } .m-groupby-label { display: none; } .m-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .m-seg::-webkit-scrollbar { display: none; } .m-seg .view-toggle-btn { padding: 8px 12px !important; font-size: 12.5px !important; } .m-tabs .png-btn.m-png { padding: 7px 10px; } } /* ── Flush mode (?flush=1) ───────────────────────────────────────────── The chart page at /talent/founder-mafias// embeds the chart as the page's masthead rather than as a figure inset within it, so the card's own gutter has to collapse for the headline to sit on the same left rail as the breadcrumb above it. The host asks for that in the iframe URL (see resources/chart.html), which is why it is right in the first painted frame. A standalone chart and a gallery thumbnail keep the gutter, and so does the PNG export — a shared image wants a margin, and without the :not() its content would run to the pixel edge and clip the last stat label. #card sets its padding inline (React), so these have to be !important. */ html[data-flush="1"]:not([data-chart-export="1"]) #card { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ── PNG share-export mode ───────────────────────────────────────────── js/agent-charts.js sets html[data-chart-export="1"] on the LIVE document for the duration of a `data-agent-frame="bare"` capture (the mutation must be live, not onclone-only: html2canvas sizes its canvas from the live element bounds, so display:none applied only in the clone would leave a blank band). The shared PNG is the card itself, full-bleed: - the interactive view tabs disappear (meaningless in a static image); - the 100vh page floor collapses so the capture hugs the content; - the footer gains the source line + URL next to the Dealroom logo. */ html[data-chart-export="1"] .m-tabs { display: none !important; } html[data-chart-export="1"], html[data-chart-export="1"] body { min-height: 0 !important; } html[data-chart-export="1"] .m-page { min-height: 0 !important; padding: 18px 0 10px !important; } html[data-chart-export="1"] .m-share-source { display: inline !important; } html[data-chart-export="1"] .m-footer-row { justify-content: space-between !important; } /* Marble transitions between groupings — uses the browser's View Transitions API. Each card has a unique view-transition-name set inline (vt-), so when the layout swaps the browser interpolates position + size between old and new spot. Browsers without support (older Safari) just snap. */ ::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 240ms; mix-blend-mode: normal; } /* CompactCard hover tooltip — used in grouped views. Stays dark in both themes (market-map tooltip style); the dark theme adds a hairline. */ .compact-card { position: relative; } .compact-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0B1A3B; color: #fff; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--m-tip-border); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(11,26,59,0.18); z-index: 5; display: flex; align-items: center; gap: 6px; } .compact-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #0B1A3B; } .compact-card:hover .compact-tooltip { opacity: 1; } .compact-tooltip-sub { color: rgba(255,255,255,0.65); font-weight: 500; }