/* ================================================================ page-commodity-detail.css – Compliance Checker Per-page styles for /commodity-group/. Almost everything visible reuses chrome that already lives in the shared stylesheets: • cc-detail-hero / -tabbar / -body / -tabpanel page-detail-frame.css • cc-detail-side / -controls / -combo / -freshness page-detail-frame.css • cc-detail-panel / -heading + .page-stats / .stat-card + .cc-detail-share* + .cc-detail-supplier* page-country-detail-shared.css • cc-table / -card / -scroll / -head / -body / -row + .cc-table--trade-flows table.css + page-country-detail-shared.css • .chart-section / .chart-stack / .chart-wrapper + .chart-legend page-member-state-detail.css • .cc-detail-combo (commodity switcher) dropdown.css What lives here is only the small set of additions that the commodity page introduces: 1. .cc-table--commodity-overview — 4-col grid for the EU overview table (HS code + description + volume + share). 2. .cc-heatmap-card / .cc-heatmap-frame — iframe wrapper + sizing for the import / export heatmaps embedded in their tabs. 3. .cc-commodity-cta-row + .cc-commodity-cta — fit-content modifier on the .cc-detail-download pill so the "View case studies linked to X" CTA doesn't stretch across the whole Overview tab. 4. .cc-commodity-description — typography lock for the rich- text profile paragraph (Wood / Soy / …), since the lede on .cc-detail-heading has a tight max-width that would squeeze it. 5. .cc-detail-heading--sub — slightly smaller variant of the panel heading, used for the second + third headings within a tab (e.g. "Top-5 EU importers per HS code" under "EU import overview"). 6. .cc-detail-supplier--empty — placeholder for HS rows that have fewer than 5 suppliers so the 5-column lane still renders evenly. Legacy chrome (the old .hero-section, .producer-section, .table-container, .percentage-bar, .update-meta-card, … all ~800 lines of it) was stripped in the cc-detail refactor. ================================================================ */ /* === 1. EU overview table (4 cols) ============================ */ /* HS code · description · total non-EU volume · relative share. Minimum widths keep the description column readable on a narrow viewport; the parent .cc-table-scroll scrolls horizontally once the viewport drops below the minimum. */ .cc-table--commodity-overview .cc-table__head, .cc-table--commodity-overview .cc-table__row { grid-template-columns: minmax(70px, 0.5fr) minmax(220px, 2fr) minmax(160px, 1fr) minmax(180px, 1.2fr); } /* === 2. Heatmap embed ========================================== */ /* The plotly heatmaps live in pre-rendered HTML files under static/graphs/heatmaps///. Wrapping them in .cc-table-card gives them the same chrome as the surrounding tables; the iframe inside fills 100% width and a fluid height that scales gently with the viewport. */ .cc-heatmap-card { padding: 0; } .cc-heatmap-frame { display: block; width: 100%; height: clamp(420px, 60vh, 720px); border: 0; } /* === 3. Overview CTA pill ===================================== */ /* .cc-detail-download is width: 100% by default (it lives in the sidebar there). On the Overview tab we want a small fit-content pill, so we drop the width override here and add a thin row wrapper that keeps the pill flush-left. */ .cc-commodity-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .cc-commodity-cta { width: auto; } /* === 4. Rich-text profile paragraph =========================== */ /* The cc-detail-heading__lede has max-width: 80ch (column-narrow, meant for short subtitles). The commodity profile paragraph is long-form prose with embedded hyperlinks, so we widen + soften the typography here, but keep the colour + font-family from the shared lede class. */ .cc-commodity-description { max-width: 90ch; font-size: var(--fs-md); line-height: 1.6; } .cc-commodity-description a { color: var(--ae-darkblue); text-decoration: underline; text-underline-offset: 2px; } .cc-commodity-description a:hover { color: var(--ae-lightgreen); } /* === 5. Sub-heading modifier ================================== */ /* Smaller variant of .cc-detail-heading__title for "section 2 of a tab" use. Keeps the same colour + family, just steps the size down so the primary tab title still leads. */ .cc-detail-heading--sub .cc-detail-heading__title { font-size: var(--fs-h4); } /* === 6. Empty supplier placeholder ============================ */ /* When a top-5 supplier slot is empty (HS code with fewer than 5 non-EU exporters), this dashed-box keeps the 5-column grid evenly spaced instead of collapsing the lane. */ .cc-detail-supplier--empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--color-muted); font-size: var(--fs-sm); border: 1px dashed var(--color-input-border); border-radius: var(--radius-dropdown); } /* === 7. Hide table-filters card on the Import Data tab ========= The commodity Import Data tab shows top-5 EU member states per HS code. EU countries are never flagged as deforestation-risk, so the only checkbox in the filter card ("Deforestation risk") has nothing to filter against. Drop the card on this tab only — the global page-detail-body.css rule shows it on every other table tab. */ body.page-commodity-detail[data-active-tab="imports"] .cc-detail-filters { display: none; } /* === 8. Producers tab — no-FAO-data empty state ================ Shown on the Producers tab when the requested year has no FAO global-production data for the commodity (2025 across the board, and Wood in every year). Replaces the donut with a centred message that points the user at the years that do have data. */ .cc-commodity-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 60ch; margin: clamp(24px, 5vw, 64px) auto; padding: clamp(20px, 3vw, 36px); background: var(--white); border: 1px dashed var(--color-input-border); border-radius: var(--radius-dropdown); } .cc-commodity-empty__icon { font-size: 28px; color: var(--ae-darkblue); opacity: 0.7; } .cc-commodity-empty__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-md); color: var(--ae-darkblue); line-height: 1.3; } .cc-commodity-empty__hint { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.5; } /* === 9. Simplified commodity page (corn / cotton / poultry) ===== Case-study-only page: no tab bar, no sidebar. A single centred column inside the grey .cc-detail-body strip holding the stat cards + the "View case studies" CTA. */ .cc-commodity-simple { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xl); } .cc-commodity-simple__cta { display: flex; justify-content: center; } .cc-commodity-simple__cta a { text-decoration: none; } .cc-commodity-simple__empty { color: var(--color-muted); font-family: var(--font-body); font-size: var(--fs-md); } /* Hero colour swatch for the simplified commodity pages — these commodities (corn / cotton / poultry) have no SVG icon, so their --commodity- colour is their identity. Sits in the same .cc-detail-hero__flag slot the icon would occupy on the full pages. */ .cc-commodity-hero-dot { display: block; width: 72px; height: 72px; border-radius: 50%; background: var(--color-muted); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); } .cc-commodity-hero-dot[data-commodity="corn"] { background: var(--commodity-corn); } .cc-commodity-hero-dot[data-commodity="cotton"] { background: var(--commodity-cotton); } .cc-commodity-hero-dot[data-commodity="poultry"] { background: var(--commodity-poultry); }