/* Chrome around the map (controls card, legend card, help tooltips, geocoder, MapLibre native controls) — clidewo design system (see ../../DESIGN_SYSTEM.md): ivory glass cards, Bebas Neue / Oswald / Lora / Fira Mono, yellow highlighter accent. Same tokens as the archived app's src/index.css. Fonts are loaded by app.R's . */ :root { --ink: #070d0d; --ivory: #fffff0; --muted: rgba(7, 13, 13, .56); --rule: rgba(7, 13, 13, .14); --yellow: #fedd00; --panel-bg: rgba(255, 255, 240, 0.9); --font-serif: 'Lora', Georgia, serif; --font-display: 'Bebas Neue', 'Oswald', sans-serif; --font-cond: 'Oswald', system-ui, sans-serif; --font-mono: 'Fira Mono', ui-monospace, monospace; } html, body { margin: 0; height: 100%; background: var(--ink); } /* Shared small-caps "label" treatment (mono/cond, muted, tracked, uppercase) — everything in the controls/legend card that isn't a headline or a value reads this way. */ .controls label, .controls .control-label, .controls .brand-sub, .controls .selectize-dropdown, .maplibregl-ctrl-geocoder--input, .rlegend .lt, .biv-y, .biv-x { font-family: var(--font-cond); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .controls .brand-sub { display: block; margin: 2px 0 14px; } .rlegend .lt { margin-bottom: 8px; } .biv-y, .biv-x { font-size: 10px; text-align: center; } /* ---- controls card ---- */ .controls { width: 260px; background: var(--panel-bg); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(14px) saturate(1.1); color: var(--ink); box-shadow: 0 10px 34px rgba(0, 0, 0, .35); font-family: var(--font-serif); } .controls .brand-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: .98; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; } .controls .hl { background: var(--yellow); color: var(--ink); padding: 0 .14em; } .controls .form-group { margin-bottom: 12px; } .controls select, .controls .selectize-input { background: var(--ivory); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; font-family: var(--font-cond); font-size: 13px; box-shadow: none; } .controls .irs-line, .controls .irs-bar { border-color: var(--rule); } .controls .irs--shiny .irs-bar { background: var(--ink); } .controls .irs--shiny .irs-handle { border-color: var(--ink); } .controls .irs-min, .controls .irs-max, .controls .irs-single, .controls .irs-from, .controls .irs-to { font-family: var(--font-mono); color: var(--muted); } /* Segmented "Map layer" toggle: hide the radio dot, style the label row as react's .seg / .seg-btn (square, ink hairline, active cell = solid yellow). */ .controls .shiny-options-group { display: flex; border: 1px solid var(--ink); margin: 0; } .controls .radio-inline { flex: 1; margin: 0; padding: 8px 6px; text-align: center; font-family: var(--font-cond); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; border-right: 1px solid var(--ink); } .controls .radio-inline:last-child { border-right: none; } .controls .radio-inline input[type=radio] { display: none; } .controls .radio-inline:has(input:checked) { background: var(--yellow); } /* centre the geocoder search to the top, clear of the corner cards */ .maplibregl-ctrl-top-left { left: 50%; transform: translateX(-50%); top: 12px; } .maplibregl-ctrl-top-left .maplibregl-ctrl-geocoder { width: 340px; max-width: 42vw; min-width: 220px; background: var(--ivory); border-radius: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .35); } /* ---- legend card (matches the controls card width) ---- */ .rlegend { width: 260px; background: var(--panel-bg); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(14px) saturate(1.1); color: var(--ink); font-family: var(--font-serif); box-shadow: 0 10px 34px rgba(0, 0, 0, .35); } .rlegend .note { font-family: var(--font-serif); font-style: italic; font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 12px; } .rlegend .ramp { height: 10px; border-radius: 0; border: 1px solid var(--rule); } .rlegend .sc { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 5px; } /* Bivariate grid fills most of the card's content width (proxying the controls card) and is truly centred: the y-axis label is taken out of flow (absolute, in the left gutter) so it doesn't unbalance the grid's own centring. */ .biv-wrap { position: relative; } .biv-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: calc(100% - 30px); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--rule); } .biv-y { position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; } .biv-x { margin-top: 4px; } /* Squares double as the risk filter: click one to keep only that class. The selected square keeps full colour while the rest dim, so the grid still reads as a legend. */ .biv-cell { cursor: pointer; transition: opacity .12s ease, box-shadow .12s ease; } .biv-cell:hover { box-shadow: inset 0 0 0 2px var(--ivory); } .biv-cell:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; } .biv-grid:has(.sel) .biv-cell:not(.sel) { opacity: .3; } .biv-cell.sel { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--yellow); } /* (?) help tooltip */ .help { position: relative; display: inline-flex; vertical-align: -2px; color: var(--muted); cursor: help; margin-left: 4px; } .help:hover, .help:focus-visible { color: var(--ink); } .help-tip { position: absolute; left: -8px; top: calc(100% + 8px); width: 236px; padding: 9px 11px; z-index: 200; background: var(--ivory); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-serif); font-size: 12.5px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: normal; white-space: pre-line; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .15s; } .help:hover .help-tip, .help:focus-visible .help-tip { opacity: 1; } /* MapLibre native-control chrome */ .maplibregl-ctrl-attrib { background: rgba(255, 255, 240, .82) !important; } .maplibregl-ctrl-attrib a { color: var(--ink) !important; } .maplibregl-ctrl-group { border-radius: 0 !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important; } .maplibregl-ctrl-scale { border-color: var(--rule) !important; color: var(--ink) !important; background: rgba(255, 255, 240, .82) !important; font-family: var(--font-mono) !important; font-size: 10px !important; }