/* Chain Drain — company card view (company.html). Reproduces the Figma "Card" wireframe, using the homepage's tokens, mesh backdrop, and Taubman logo. Body in cols 1-3; matrix in cols 4-5. */ * { box-sizing: border-box; } html, body { margin: 0; color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; /* no rubber-band past the fixed mesh into bare page colour */ } /* Fallback tone on only, so it doesn't paint over the mesh canvas. Paper (not grey --color-bg) so the load flash + any overscroll gap match the mesh. */ html { background: var(--color-paper); } /* Static mesh-gradient backdrop (js/mesh-bg.js), fixed behind all content. */ #mesh-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; pointer-events: none; } /* 5-column grid matching the homepage. */ .card { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); column-gap: var(--gutter); align-content: start; min-height: 100vh; padding: var(--edge-top) var(--margin) 96px; } /* Close (×) — fixed top-right, closes the card view (back / homepage). */ .card__close { position: fixed; top: 16px; right: 16px; z-index: 40; width: 44px; height: 44px; padding: 0; font: 400 28px/44px var(--font-body); color: var(--color-ink); background: var(--color-paper); border: 0; border-radius: 50%; cursor: pointer; } .card__close:hover { background: rgba(0, 0, 0, 0.12); } .card__title { grid-column: 1 / 4; grid-row: 1; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-title); line-height: 1.05; color: var(--color-ink); } .card__url { grid-column: 1 / 4; grid-row: 2; width: max-content; margin: 10px 0 0; font-size: 20px; color: var(--color-ink); text-decoration: none; } .card__url:hover { text-decoration: underline; } .card__body { grid-column: 1 / 4; grid-row: 3; margin: 44px 0 0; font-size: var(--fs-body); line-height: 1.25; color: var(--color-ink); } .card__body p { margin: 0 0 1em; } .card__body p:last-child { margin: 0; } /* --- Update notes (post-research `updates:`), below the body text --- */ .card__updates { grid-column: 1 / 4; grid-row: 4; align-self: start; margin: 2.5em 0 0; /* ~two blank lines above (2 × 1.25 line-height) */ padding: 0; color: var(--color-ink); font-size: var(--fs-body); line-height: 1.25; font-style: italic; } .card__updates[hidden] { display: none; } .card__update { margin-top: 14px; } .card__update:first-of-type { margin-top: 0; } .card__update-date { display: block; font-weight: 700; margin-bottom: 3px; } .card__update p { margin: 0; } .card__update a { color: var(--color-ink); text-decoration: underline; } /* Underlined terms match the homepage drawer triggers: Inter Black, thick underline, and each opens a justification drawer on hover / focus / tap. */ .card__body .term { font-weight: 900; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; cursor: pointer; } .card__body .term:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; } /* Justification drawer — white panel in cols 4-5, vertically centered, like the homepage drawers. Shown on term hover; the matrix hides while it's open so cols 4-5 shows one thing at a time. */ /* : non-modal hovercard on desktop, modal bottom sheet on touch. */ .card__drawer { position: fixed; top: 0; bottom: 0; left: auto; right: var(--margin); width: calc(2 * var(--col) + var(--gutter)); z-index: 20; display: none; flex-direction: column; color: var(--color-ink); margin: 0; border: 0; /* Bottom pad = 1.5× the site footer's height so scrolled-to content clears the fixed footer bar instead of hiding behind it. */ padding: 24px 0 calc(var(--pdf-footer-h) * 1.5); background: transparent; max-width: none; max-height: none; height: auto; /* override UA height:fit-content so top+bottom stretch it */ /* Scroll the hovercard when its content is taller than the window (wheel works while the cursor is over it). `margin: auto` on the body — not justify-content:center — keeps it vertically centered when it fits yet stays scrollable when it overflows (justify-content:center clips the top). */ overflow-y: auto; overscroll-behavior: contain; } .card__drawer[open] { display: flex; } .card__drawer::backdrop { background: rgba(20, 20, 20, 0.55); } .card__drawer-body { margin: auto 0; font-size: 15px; line-height: 1.4; } /* Context heading above the rows — says which kind of datapoint the drawer is showing (Phases Touched, Likely Buyers, …). */ .card__drawer-body .just-head { display: block; margin-bottom: 8px; font-weight: 900; font-size: 15px; } /* Phase justification: one row per phase, bold name, 1px rule between rows and a 1px rule bounding the whole list top and bottom. */ .card__drawer-body .just-rows { display: block; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); } .card__drawer-body .just-row { display: block; padding: 10px 0; border-top: 1px solid var(--color-ink); } /* First row's own rule is redundant with the container's top rule. */ .card__drawer-body .just-row:first-child { border-top: 0; } .card__drawer-body .just-row__name { font-weight: 900; } body.is-drawer-open .card__matrix { visibility: hidden; } .card__drawer-close { display: none; } /* Bottom-sheet drawer: touch pointers OR any narrow window (≤768px, incl. a narrow desktop window with a fine pointer). Below this width the card is a single column with no room for the side hovercard, so the drawer becomes a modal sheet opened on click — mirrors the /research charts' layout split. */ @media (hover: none), (pointer: coarse), (max-width: 768px) { .card__drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 82vh; justify-content: flex-start; box-sizing: border-box; padding: 44px 20px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: var(--color-paper); color: var(--color-ink); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45); } body.is-drawer-open .card__matrix { visibility: visible; } /* sheet covers it via backdrop */ .card__drawer-close { display: block; position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 34px; color: var(--color-ink); background: rgba(0, 0, 0, 0.08); border: 0; border-radius: 50%; cursor: pointer; } } /* Provenance line ("Added to Database … · Edited by Human on …"). In normal flow at the end of the card, after the body and any update notes — it used to be pinned to the viewport bottom-left, which read as chrome rather than as the last thing the page has to say. Set small; the fixed footer bar keeps its own clearance via body.has-site-footer's padding-bottom. */ .card__dates { grid-column: 1 / 4; grid-row: 5; align-self: start; margin: 2.5em 0 0; font-size: 14px; color: var(--color-ink); } .card__dates[hidden] { display: none; } /* Source list, under the provenance byline. Deliberately the SAME type as .card__dates (14px, --color-ink): both are apparatus rather than argument, and giving the bibliography its own size would promote it above the prose it supports. Inherits the byline's column span so the two align on the left edge. */ .card__sources { grid-column: 1 / 4; grid-row: 6; align-self: start; margin: 1.6em 0 0; font-size: 14px; color: var(--color-ink); } .card__sources-head { margin: 0 0 .5em; font-size: inherit; /* an

for outline/SEO, not for size */ font-weight: 700; } .card__sources-list { margin: 0; padding: 0; /* No bullets and no S# ids: the in-text markers are stripped, so nothing on the page refers to a marker here. Each entry is just a line, flush with the byline's left edge. */ list-style: none; } .card__sources-list li { margin: 0 0 .45em; line-height: 1.35; } .card__source-meta { opacity: .68; } /* --- Company matrix (cols 4-5, aligned to the first body paragraph) --- */ .card__matrix { grid-column: 4 / 6; grid-row: 3; align-self: start; margin-top: 44px; /* line up with .card__body's top margin */ } .card__matrix[hidden] { display: none; } /* Styled to match the homepage drawer matrix (.mmx-*, home.css): every stroke — frame, crosshair, cell ring, labels — is --mmx-line, the graph's deep blue, at full opacity. Axis labels read "Digital: High" up the left, "Chain: Low" below. */ .cmx-grid { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 5px; width: max-content; color: var(--mmx-line); } .cmx-ylab { grid-column: 1; grid-row: 1; align-self: stretch; /* fill the plot's height so text-align can slide the label to the company's row (top/center/bottom) */ writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 15px; } .cmx-xlab { grid-column: 2; grid-row: 2; text-align: center; font-size: 15px; } .cmx-plot { grid-column: 2; grid-row: 1; position: relative; width: 208px; height: 208px; border: 1px dashed var(--mmx-line); /* dashed outer frame — matches the homepage drawer matrix */ } /* Centerlines at full opacity — they read as structure, not as a faint hint. */ .cmx-cross::before, .cmx-cross::after { content: ""; position: absolute; background: var(--mmx-line); } .cmx-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .cmx-cross::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } /* Single hollow ring at the company's cell (--mx-x / --mx-y set by JS). */ .cmx-marker { position: absolute; left: var(--mx-x, 50%); top: var(--mx-y, 50%); width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--mmx-line); transform: translate(-50%, -50%); } /* Taubman logo — identical to the homepage (fixed bottom-right). */ .home__logo { position: fixed; right: 36px; bottom: 40px; width: 250px; height: 25px; object-fit: contain; pointer-events: none; z-index: 30; } @media (max-width: 768px) { .card { grid-template-columns: 1fr; } /* grid-row: auto so `order` (below) controls the stacking, not the desktop row pins. */ .card__title, .card__url, .card__body, .card__updates, .card__dates, .card__sources, .card__matrix { grid-column: 1; grid-row: auto; } /* Matrix moves up to just below the URL (title → url → matrix → body → updates → dates). */ .card__title { order: 1; } .card__url { order: 2; } .card__matrix { order: 3; grid-row: auto; margin: 24px 0 8px; } .card__body { order: 4; } .card__updates { order: 5; } .card__dates { order: 6; margin: 28px 0 0; } .card__sources { order: 7; } }