/* Styles for the injected VizQuill lens + its summary/bars panel — clidewo LIGHT ivory-glass cards, matching app/src/index.css (the React app's design system). Fonts (Bebas Neue / Lora / Oswald / Fira Mono) are loaded by the host page's (r-app/app.R), so this file just references the family names. */ :root { --yellow: #fedd00; --terracotta: #D10088; --teal: #1098ad; --ink: #070d0d; --ivory: #fffff0; --muted: rgba(7, 13, 13, 0.56); --rule: rgba(7, 13, 13, 0.14); --subtle: rgba(7, 13, 13, 0.05); --panel-bg: rgba(255, 255, 240, 0.9); --panel-border: rgba(7, 13, 13, 0.12); --font-display: 'Bebas Neue', 'Oswald', sans-serif; --font-serif: 'Lora', Georgia, serif; --font-cond: 'Oswald', system-ui, sans-serif; --font-mono: 'Fira Mono', ui-monospace, monospace; } /* ---- lens overlay + ring (over the dark satellite map) ---- */ .lens-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; } .lens-overlay svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; } .vq-lens-ring { fill: none; stroke: var(--yellow); stroke-width: 2.5; pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); } .vq-lens-handle { fill: rgba(254, 221, 0, 0.25); stroke: var(--yellow); stroke-width: 2; r: 9px; pointer-events: auto; cursor: grab; } .vq-lens-handle:active { cursor: grabbing; fill: rgba(254, 221, 0, 0.55); } .vq-lens-headline { fill: #fff; font: 400 40px var(--font-display); letter-spacing: 0.01em; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(0, 0, 0, 0.68); stroke-width: 4px; pointer-events: none; } .vq-lens-subline { fill: rgba(255, 255, 255, 0.96); font: 400 10px var(--font-mono); letter-spacing: 0.02em; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(0, 0, 0, 0.6); stroke-width: 3px; pointer-events: none; } /* ---- floating summary + bars panel (top-right), ivory glass ---- */ .embed-panel { position: absolute; top: 12px; right: 12px; width: 300px; z-index: 10; display: flex; flex-direction: column; gap: 12px; /* Leave room bottom-right for the stacked native map controls (zoom/fullscreen/scale). */ max-height: calc(100vh - 220px); overflow-y: auto; overflow-x: hidden; font-family: var(--font-serif); color: var(--ink); } .embed-panel::-webkit-scrollbar { width: 8px; } .embed-panel::-webkit-scrollbar-thumb { background: var(--rule); } .panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); } /* ---- summary ---- */ .summary-head { display: block; } .summary-eyebrow { font-family: var(--font-cond); font-weight: 500; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; } /* Three metrics in one row (risk index, climate hazard, decent work) — smaller than the old single big metric so all three fit the panel width. */ .summary-trio { display: flex; gap: 8px; } .trio-item { flex: 1; min-width: 0; text-align: center; } .trio-chip { display: inline-block; width: 14px; height: 14px; border-radius: 0; border: 1px solid var(--ink); margin-bottom: 4px; } .trio-value { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 0.95; color: var(--ink); } .trio-label { font-family: var(--font-cond); font-weight: 500; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 16px 0; background: var(--rule); border: 1px solid var(--rule); } .stat { background: var(--panel-bg); padding: 9px 11px; } .stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink); } .stat-label { font-family: var(--font-cond); font-weight: 500; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 3px; } .summary-mix-title { font-family: var(--font-cond); font-weight: 500; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .summary-empty { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: var(--muted); } .mix { display: flex; flex-direction: column; gap: 8px; } .mix-row { display: grid; grid-template-columns: 80px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; } /* Same format/style as the mean-indicator bar chart's .vqb-bar-label/.vqb-bar-value below — crop name = label (muted, 9px, right-aligned, ending at the bar), share = value (ink, 9px, left-aligned, starting right after the bar) — the two rows read as one system. */ .mix-name { font-family: var(--font-mono); font-weight: 400; font-size: 9px; color: var(--muted); text-align: right; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mix-bar-track { height: 6px; background: var(--subtle); overflow: hidden; } .mix-bar { display: block; height: 100%; background: var(--yellow); } .mix-pct { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 9px; color: var(--ink); } /* ---- VizQuill bar chart (mean indicators): Bebas section titles, mono labels/values ---- */ .bars-head { font-family: var(--font-cond); font-weight: 500; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .bars-svg { width: 100%; height: 424px; } .bars-svg svg { overflow: visible; } .vqb-section-title { fill: var(--ink); font: 400 15px var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; dominant-baseline: central; } .vqb-bar-track { fill: var(--subtle); } .vqb-bar-hazard { fill: var(--terracotta); } .vqb-bar-dw { fill: var(--teal); } .vqb-bar-label { fill: var(--muted); font: 400 9px var(--font-mono); text-anchor: end; dominant-baseline: central; } .vqb-bar-value { fill: var(--ink); font: 500 9px var(--font-mono); text-anchor: start; dominant-baseline: central; }