/* SpitzerData — colors lifted from Output.xlsm!DS3 + API_output.xlsm
via xlwings Font.Color / Interior.Color / DisplayFormat reads.
Static palette:
#0E1F3D navy band (cell fill on header / section rows)
#D9F7FD pale cream-cyan text on the navy band
#002060 dark-blue data-cell text (default body color)
#F2F2F2 grey zebra band for odd data rows (API_output rows 13/15/17/…)
#FFFFFF white background for even data rows
Conditional-formatting fills are applied as inline `style="background:…"`
per cell (sourced from cell_fills[col_letter] in api_output.py); the
stylesheet just provides the zebra fallback and typography.
Typography: Verdana Pro, no borders, tight spacing.
*/
:root {
--navy: #0E1F3D;
--cream: #D9F7FD;
--datablue: #002060;
--bg: #FFFFFF;
--zebra: #F2F2F2;
--neg: #C00000;
--pos: #007a3a;
--chip-bg: #F0F4F8;
--chip-border: #C7D3E0;
--chip-hover: #FFF4D6;
--accent: var(--datablue);
/* Uniform height for every non-top-row /database chart row, so
graph 1 (paired with the spanned aggbox) lines up with graphs 3-8
below. Iterated empirically. */
--chart-row: 600px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
/* Navy page background — same colour as the header band and section
titles, so when the tables are narrower than the viewport the page
gutters match the header. */
background: var(--navy);
color: var(--datablue);
font-family: "Verdana Pro", Verdana, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 11px;
line-height: 1.25;
}
/* ── Top toolbar (logo + brand strip above the header) ───────────────── */
/* Same navy as the body background -- visually a continuation of the
page gutter. Separated from the header band below by a thin cream
line. Logo + "CTFN" wordmark are centred as a group.
Sized so the row feels like a proper banner above the table, not a
thin strip: ~50% bigger than the original 48px version. */
.top-toolbar {
background: var(--navy);
height: 72px;
padding: 0 24px;
display: flex;
align-items: center; /* vertically centre logo + brand */
justify-content: flex-start; /* push the pair to the left edge */
gap: 16px;
border-bottom: 1px solid var(--cream);
}
.toolbar-logo {
height: 54px;
width: auto;
display: block;
/* Nudge the logo image up 3px relative to the wordmark/toolbar
centreline so it visually sits where Deane wants it (was -7px,
bumped down 4px on his ask). */
transform: translateY(-3px);
}
.toolbar-brand {
/* Same family / weight / colour as `.page-header h1`. Font-size set
to the logo's pixel height so the CTFN wordmark visually balances
the logo to its left.
`inline-flex` + explicit 54px height + `align-items: center` so
the visible glyphs (which by default sit in the top portion of
the line-box due to Verdana's ascender/descender ratio) get
centred inside a 54px box matching the logo height -- the toolbar's
own `align-items: center` then centres the box vertically. Without
this the wordmark reads as floating high relative to the logo. */
display: inline-flex;
align-items: center;
height: 54px;
font-family: "Verdana Pro", Verdana, sans-serif;
font-weight: 700;
font-size: 54px;
letter-spacing: 0.5px;
color: var(--cream);
line-height: 1.0;
}
/* ── Header band ────────────────────────────────────────────────────── */
.page-header {
background: var(--navy);
color: var(--cream);
padding: 12px 24px;
text-align: center;
}
.page-header h1 {
margin: 0;
font-family: "Verdana Pro", Verdana, sans-serif;
font-weight: 700;
font-size: 28px;
letter-spacing: 0.5px;
color: var(--cream);
line-height: 1.0;
}
.subtitle {
color: var(--cream);
opacity: 0.85;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 4px;
}
.refresh-indicator {
opacity: 0.7;
font-weight: 500;
margin-left: 6px;
}
#last-refreshed.error { color: #ffb3a3; }
/* ── /database page layout ────────────────────────────────────────────── */
.page-nav {
background: var(--navy);
padding: 12px 24px;
display: flex;
gap: 32px;
border-bottom: 1px solid var(--cream);
}
.page-nav a {
color: var(--cream);
text-decoration: none;
font-family: "Verdana Pro", Verdana, sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.5px;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.page-nav a.active { border-bottom-color: var(--cream); }
.page-nav a:hover:not(.active):not(.disabled) { opacity: 0.8; }
.page-nav a.disabled { opacity: 0.4; cursor: default; }
/* Hover-dropdown wrapper for nav items that spill a submenu below
(e.g. LIVE METRICS -> GET EXCEL PLUGIN). Per Deane 2026-05-27. */
.page-nav .nav-with-dropdown {
position: relative;
display: inline-block;
}
.page-nav .nav-dropdown {
display: none;
position: absolute;
top: 100%; /* directly below the parent anchor */
left: 0;
width: fit-content; /* hug the widest child instead of min-width */
background: var(--navy);
/* Per Deane 2026-05-28: no border -- the dropdown should read as a
seamless extension of the dark toolbar above, not a bordered card. */
border: none;
padding: 8px 0;
z-index: 50;
}
.page-nav .nav-with-dropdown:hover .nav-dropdown,
.page-nav .nav-with-dropdown:focus-within .nav-dropdown {
display: block;
}
.page-nav .nav-dropdown a {
display: block;
padding: 6px 16px;
font-size: 12px;
border-bottom: none;
white-space: nowrap;
}
.page-nav .nav-dropdown a:hover { opacity: 0.8; }
/* ── /pre-event-pusu page (Deane 2026-05-28) ────────────────────────
Layout: left column = chart (top) + sitbox (full remaining height);
right column = aggbox (spans full height). Overrides the default
.db-charts grid which is tuned for the /database 5x2 chart grid. */
.db-charts.pre-event-main {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
/* Chart row at 450px (was 250px) -- +40% on 2026-05-28, then
+100px on 2026-05-28. */
grid-template-rows: 450px;
grid-auto-rows: 1fr;
min-height: calc(100vh - 230px); /* fill remaining viewport */
}
.db-charts.pre-event-main .chart-cell[data-chart-cell="top-left"] { grid-column: 1; grid-row: 1; }
.db-charts.pre-event-main .chart-cell[data-chart-cell="top-right"] { grid-column: 2; grid-row: 1 / span 2; }
.db-charts.pre-event-main .chart-cell[data-chart-cell="bottom"] { grid-column: 1; grid-row: 2; min-height: 400px; }
/* Sitbox table styling -- shares look-and-feel with .deals-list but
uses its own classes so the two never fight over column widths. */
.sitbox-wrap {
flex: 1; min-height: 0; overflow-y: auto;
font-family: "Verdana Pro", Verdana, sans-serif; font-size: 10px;
}
.sit-table {
width: 100%; border-collapse: collapse;
/* Fixed layout so per-column widths below are authoritative; without
this, browsers expand "wide" data cells regardless of th width. */
table-layout: fixed;
}
.sit-table th {
position: sticky; top: 0;
background: var(--navy); color: var(--cream);
text-align: left; padding: 4px 6px;
font-weight: 700; letter-spacing: 0.3px;
border-bottom: 1px solid rgba(217,247,253,0.3);
white-space: normal; /* allow header wrap (Undisturbed
date) */
font-size: 10px;
}
.sit-table td {
padding: 3px 6px; color: var(--cream);
border-bottom: 1px solid rgba(217,247,253,0.08);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sit-table tr:hover td { background: rgba(217,247,253,0.04); }
.sit-empty { text-align: center; padding: 24px; opacity: 0.6; }
/* Sitbox column widths. Pinned-width columns first (date / type /
status / undervalued lookups); the variable-text columns (Target,
Target sector, Acquirers) get per-mode tuning below. */
.sit-table .col-undisturbed { width: 115px; } /* fits 'Undisturbed date' inline (Deane 2026-05-28) */
.sit-table .col-first-24 { width: 90px; }
.sit-table .col-acquirer-type { width: 110px; }
.sit-table .col-undervalued { width: 130px; }
.sit-table .col-final-ext { width: 90px; }
.sit-table .col-status { width: 80px; }
/* Pre-event mode (Deane 2026-05-28):
Target +10% (was 18% -> now 20%)
Target sector: pinned just wide enough to hold the typical
sector label (no width:auto -- under table-layout: fixed,
auto would split remaining space, which we want to give
wholly to Acquirers).
Acquirers: no declared width -> absorbs every spare px. */
.sit-mode-all .col-target { width: calc(20% + 15px); } /* +15px; comes off the auto-width Acquirers column (Deane 2026-05-30) */
.sit-mode-all .col-target-sector { width: 143px; } /* +10% from 130px (Deane 2026-05-28); spare px comes off Acquirers */
/* PUSU mode (Deane 2026-05-28):
Target sector pinned at 130px (matches Other-mode baseline).
Acquirer type shrinks to content (header 'Acquirer type' wraps to
'Acquirer / type' on two lines; data values 'PE' / 'SPAC' /
'Strategic' all fit at 60px).
Status gets +15px left padding so the column is pushed right
(cells AND header inherit the bumped padding-left).
Acquirers: NO declared width -> absorbs every spare pixel under
table-layout: fixed, including the ~50px freed by Acquirer type
shrinking and the implicit shift from Status's left padding. */
.sit-mode-pusu .col-target { width: calc(18% + 15px); } /* +15px off Acquirers (Deane 2026-05-30) */
.sit-mode-pusu .col-target-sector { width: 130px; }
.sit-mode-pusu .col-acquirer-type { width: 70px; } /* +10px (Deane 2026-05-28) -- pushes Final extension + everything to its right 10px over; the gain comes off the auto-width Acquirers column */
.sit-mode-pusu .col-status { padding-left: 21px; }
/* ── /deal/{sit_id} per-sit page (Deane 2026-05-28) ─────────────────── */
.deal-header {
text-align: center;
margin: 22px auto 8px;
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
}
.deal-header .deal-title {
font-size: 22px; font-weight: 700; letter-spacing: 0.4px;
}
.deal-header .deal-ticker {
font-size: 14px; font-weight: 600; margin-top: 4px; opacity: 0.85;
}
.deal-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 14px;
padding: 0 18px;
margin-top: 12px;
/* The left column (chart + parameter list) defines the row height; the
right column (aggbox) overrides this with align-self: start + a fixed
height so it ends level with the bottom of the graph rather than
stretching down alongside the parameters -- see the top-right rule
below (Deane 2026-05-30). */
align-items: stretch;
}
/* Left column wrapper: chart on top, parameter list below. Flex
column so the chart can take a fixed height and the parameter
list flows under it. Gap is 14px + the same half-line bump as
between parameter rows (~9px) = ~23px between the chart's
bottom edge and the first parameter row (Deane 2026-05-28). */
.deal-main {
display: flex;
flex-direction: column;
gap: 23px;
min-width: 0;
}
/* Chart cell is 3x taller than the original ~200px rendered height
(Deane 2026-05-28). Explicit height (not min-height) so the grid
row pins to it -- otherwise Chart.js's responsive canvas was
collapsing to its parent's intrinsic height. */
.deal-chart-cell { height: 600px; }
/* Aggbox ends level with the bottom of the graph: pin it to the chart's
height instead of stretching down alongside the parameter list. Keep in
sync with .deal-chart-cell above; its internal .aggbox-wrap (flex:1;
overflow-y:auto) scrolls the headlines within (Deane 2026-05-30). */
.deal-layout .chart-cell[data-chart-cell="top-right"] {
height: 600px;
align-self: start;
}
.deal-empty {
padding: 60px 24px; text-align: center;
color: var(--cream); opacity: 0.7;
font-family: "Verdana Pro", Verdana, sans-serif; font-size: 12px;
line-height: 1.6;
}
.deal-empty code {
background: rgba(217,247,253,0.10); padding: 1px 6px;
border-radius: 3px; font-family: ui-monospace, "SF Mono", Monaco, monospace;
font-size: 11px;
}
.deal-status {
text-align: center;
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 12px;
margin: 14px auto 24px;
letter-spacing: 0.3px;
}
.deal-status .sep { margin: 0 10px; opacity: 0.45; }
.deal-status strong { font-weight: 700; }
/* Per-sit parameter list (Deane 2026-05-28). Lives inside the
left column under the chart (.deal-main), so it shares horizontal
space with the aggbox sibling rather than running full-width below.
Bold labels, plain values, half-line spacing between rows. */
.deal-params {
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 12px;
line-height: 1.55;
}
/* Half-line spacing -- 1.55 line-height x 0.5 = 0.775em added below
each row (margin-bottom rather than top+bottom so consecutive rows
collapse cleanly). */
.deal-param-row { margin: 0 0 0.775em; }
.deal-param-row:last-child { margin-bottom: 0; }
.deal-param-row strong { font-weight: 700; }
/* Group separator -- one blank line between logical groups (per the PDF
spacing spec, Deane 2026-05-30). */
.deal-param-gap { height: 0.7em; }
/* Three info columns below the graph + aggbox (Deane 2026-05-30):
Target / Acquirer / Deal, full width, each with a centred header.
Reuses .deal-param-row for the rows. */
.deal-info-cols {
display: grid;
/* Four narrow text columns + a wider 5th for the timing chart. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
gap: 18px;
padding: 0 18px;
/* Negative top margin pulls the info block up tight under the
graph/aggbox (Deane 2026-05-30: 20px -> 10px -> -30px). */
margin: -30px auto 28px;
}
/* Pre-event / PUSU situations show only Target / Potential acquirer /
Situation columns (no regulatory clearances or timing graph) -- 3 equal
columns instead of the announced-deal 5 (Deane 2026-05-30). */
.deal-info-cols-pre {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
max-width: 1100px;
}
/* Pill under the deal header marking the situation type + lifecycle. */
.deal-situation-badge {
display: inline-block;
margin-top: 8px;
padding: 2px 12px;
border: 1px solid rgba(217,247,253,0.35);
border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
color: var(--cream); background: rgba(217,247,253,0.08);
}
/* Pre-event/PUSU sitbox rows link to their /deal/{sit_id} page. */
.sit-row-link { cursor: pointer; }
.deal-info-col {
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 12px;
line-height: 1.55;
min-width: 0;
}
.deal-info-header {
text-align: center;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.4px;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(217,247,253,0.18);
}
/* Column 5: the "Average timing" chart + the clickable cross-filter controls
in the info columns (Deane 2026-05-30). */
.deal-timing-col .dt-canvas-wrap { position: relative; height: 280px; }
.deal-timing-col .dt-empty {
text-align: center; font-size: 11px; font-style: italic;
color: var(--cream); opacity: 0.6; margin-top: 8px;
}
/* Acquirer name sub-headers + co-acquirer display rows. */
.deal-acq-name { font-weight: 700; margin: 8px 0 4px; }
.deal-acq-name:first-child { margin-top: 0; }
.deal-subrow { padding-left: 10px; opacity: 0.9; }
/* Indent the primary acquirer's clickable classification under its name
(parallel to the co-acquirer subrows) when there are multiple acquirers. */
.deal-indent { padding-left: 10px; }
/* Clickable classification filter chips + clearance agency buttons. */
.dt-filter, .dt-agency {
background: rgba(217,247,253,0.10); color: var(--cream);
border: 1px solid rgba(217,247,253,0.30); border-radius: 3px;
font-family: inherit; font-size: 11px; padding: 1px 6px; cursor: pointer;
line-height: 1.4;
}
.dt-filter:hover, .dt-agency:hover { background: rgba(217,247,253,0.20); }
.dt-filter.active, .dt-agency.active {
background: var(--cream); color: var(--datablue); font-weight: 700;
border-color: var(--cream);
}
.dt-agencies { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dt-agency.dt-status-cleared { border-color: rgba(127,207,250,0.7); }
.dt-agency.dt-status-not-filed { opacity: 0.8; }
/* Aggbox row highlighted by chart-dot hover (Deane 2026-05-28).
Mousing over a news dot on /deal/{sit_id} tints the corresponding
headline row so the user can read it without losing chart context. */
.aggbox-row.aggbox-row-hover {
background: rgba(217,247,253,0.18) !important;
outline: 1px solid rgba(217,247,253,0.45);
}
/* Live Metrics Target / Acquirer cells link to /deal/{sit_id}
(Deane 2026-05-28). Anchor inherits the cell's color + font; the
cell itself gets a pointer cursor + faint underline on hover so
the link affordance is obvious without re-skinning the column. */
.metrics-table td.sit-link-cell { cursor: pointer; }
.metrics-table td.sit-link-cell .sit-link {
color: inherit;
text-decoration: none;
display: block; /* whole-cell hit target, including padding */
}
.metrics-table td.sit-link-cell:hover .sit-link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* LOG IN / LOG OUT pinned to the far right of the nav row. The form
wrapper around LOG OUT POSTs to /signout; the button is styled to
match the anchor siblings so the nav row reads as one consistent
group. (Per Deane, 2026-05-27.) */
.page-nav .nav-auth {
margin-left: auto;
}
.page-nav form.nav-auth {
display: inline; /* don't break the flex row */
}
.page-nav form.nav-auth button {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.5px;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.page-nav form.nav-auth button:hover { opacity: 0.8; }
.summary-bar {
background: var(--navy);
color: var(--cream);
padding: 12px 24px;
display: flex;
gap: 40px;
flex-wrap: wrap;
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 12px;
border-bottom: 1px solid rgba(217,247,253,0.2);
}
.summary-stat strong { font-size: 14px; margin-left: 6px; }
.database-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 16px;
padding: 16px 24px;
background: var(--navy);
min-height: calc(100vh - 200px);
}
.db-filters {
color: var(--cream);
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 11px;
/* Sticky + align-self: start so the sidebar pins at the top of the
viewport as the user scrolls past it, without the grid track
stretching to match the much-taller chart column. */
position: sticky;
top: 0;
align-self: start;
/* Mouse-wheel over the sidebar scrolls ONLY the sidebar -- doesn't
bubble out to scroll the page. overscroll-behavior: contain stops
scroll-chaining at the sidebar's boundary, so even when there's
nothing to scroll inside, the wheel event doesn't reach the
window (per Deane, 2026-05-23 "scroll independently" clarification).
max-height + overflow-y: auto make it an actual scroll container
so the contain rule has something to anchor to; the hidden
scrollbar keeps the chrome out of the way. */
max-height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
.db-filters::-webkit-scrollbar { display: none; }
/* CFIUS event-state select has exactly 4 options and size=4, so the
scrollbar is purely cosmetic gutter (per Deane, 2026-05-23) -- hide
it. Same vocab as the other 4-option events but those don't render
a scrollbar because their lists are slightly shorter. */
#f-cfius {
overflow: hidden;
scrollbar-width: none; /* Firefox */
}
#f-cfius::-webkit-scrollbar { display: none; } /* Chromium / Safari */
.db-filters .filter-section {
font-weight: 700; font-size: 12px; letter-spacing: 0.4px;
margin: 16px 0 6px; padding-bottom: 4px;
border-bottom: 1px solid rgba(217,247,253,0.3);
}
.db-filters .filter-group { margin-bottom: 8px; }
.db-filters label { display: block; font-size: 11px; margin-bottom: 2px; opacity: 0.85; }
.db-filters select, .db-filters input {
background: rgba(217,247,253,0.1); color: var(--cream);
border: 1px solid rgba(217,247,253,0.3);
font-family: "Verdana Pro", Verdana, sans-serif;
font-size: 10px; padding: 3px; width: 100%; box-sizing: border-box;
}
.db-filters .filter-row { display: flex; gap: 4px; }
.db-filters .filter-row input { width: 50%; }
/* Date-range row: from / "to" / to, evenly distributed with the
word "to" between, keeping the two date inputs narrow enough that
the picker icons still fit. */
.db-filters .filter-row.date-range { align-items: center; gap: 4px; }
.db-filters .filter-row.date-range input[type=date] {
flex: 1 1 0; min-width: 0; width: auto;
}
.db-filters .filter-row.date-range .range-sep {
color: var(--cream); font-size: 10px; opacity: 0.75;
flex: 0 0 auto;
}
/* Events two-up grid (Antitrust / FDI & FSR sections) -- each filter
sits in 50% of the sidebar width, two per row, so all six event
selectors fit in 3 visual rows instead of 6. */
.db-filters .events-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
}
.db-filters .events-grid .filter-group { margin-bottom: 0; }
/* "Search to add:" composite widget. Sits in one .events-grid cell
(same width as a regulator dropdown next to it) and stacks four
single-line controls: label, level, location, text-entry. */
.db-filters .reg-search-group { display: flex; flex-direction: column; gap: 2px; }
/* Push the "Search:" label down 2px and zero its bottom-margin so the
gap to the "Level: all" box shrinks (label is visually closer to its
group's first control). */
.db-filters .reg-search-group label {
margin-top: 2px;
margin-bottom: 0;
}
/* Bumped from 18 to 22 so the placeholder text ("Level: all" etc.) is
vertically centred inside the box instead of being clipped. */
.db-filters .reg-search-group select,
.db-filters .reg-search-group input { height: 22px; }
/* (text-autocomplete uses native