/* ========================================================================== Report generation modal -------------------------------------------------------------------------- Styles the single contact-capture modal built by report_request_modal() in R/cityviz_utils_report_request.R, shown by Building Permits, Economic Indicators, Report Studio and Community Profile. Loaded globally from golem_add_external_resources() (R/app_ui.R), which brochure applies to every route including /embed, so the modal looks the same inside an embedded widget iframe. Everything is scoped to .report-request-modal / .report-request-dialog and prefixed rr-, so it cannot collide with the .format-card / .format-icon / .format-name classes report-studio-redesign.css defines for Report Studio's on-page picker. Two colours arrive as custom properties set inline on .modal-content: --rr-accent the client's brand colour (config$style$brand_primary) --rr-accent-soft the same colour at 8% alpha Metrics: 720px wide, 24px of content padding, 20px between sections, 44px controls. ========================================================================== */ /* --- Stacking ------------------------------------------------------------- */ /* Shiny already appends #shiny-modal to , so the modal is not trapped in a lower stacking context — it is simply outranked. cityviz.css:249 gives .navbar-expand-xl `position: relative; z-index: 2000` and cityviz.css:1308 gives .ticker-wrap `z-index: 10000`, both above Bootstrap's 1055/1050, so the navigation painted over the top of the dialog. The body class is added and removed by the inline script in the modal body, which keeps the lift scoped to this modal: every other showModal() in the app keeps Bootstrap's ordering. `body` + the id beats Bootstrap's `.modal` and `.modal-backdrop` on specificity without !important. */ body.rr-modal-open .modal-backdrop { z-index: 10050; } body.rr-modal-open #shiny-modal { z-index: 10060; } /* --- Shell ---------------------------------------------------------------- */ /* Two classes, because cityviz.css:4036 sets .modal-dialog { margin-top: 100px } and responsive.css:231 sets body .modal-dialog { margin: 20px 10px }. */ .modal-dialog.report-request-dialog { max-width: 720px; margin: 1rem auto; } .report-request-modal { border: none; border-top: 3px solid var(--rr-accent, #893448); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #3E4C59; /* Short screens scroll the body rather than pushing the footer off under the fixed navigation. dvh first-with-fallback: vh alone jumps as mobile browser chrome hides. .modal-content is already a flex column in Bootstrap 5, so capping it here is all the body's overflow rule needs. */ max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } /* --- Header --------------------------------------------------------------- */ /* Title, badge and supporting text share the header. Overrides the global .modal-header { padding-top: 0; padding-bottom: 0 }. Right padding clears the absolutely positioned close button so a long report name wraps above it rather than running underneath. */ .report-request-modal .modal-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; padding: 1.25rem 3.25rem 1.15rem 1.5rem; border-bottom: 1px solid #ece9e3; } .report-request-modal .modal-title { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: #1F2933; } .report-request-modal .rr-title-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rr-accent-soft, rgba(0, 0, 0, 0.05)); color: var(--rr-accent, #893448); font-size: 1rem; } /* Full-width second row, indented to line up under the title text. */ .report-request-modal .rr-subtitle { flex: 0 0 100%; margin: 0.3rem 0 0; padding-left: 3rem; font-size: 0.9rem; line-height: 1.45; color: #52606D; } .report-request-modal .rr-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: #7B8794; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .report-request-modal .rr-close:hover { background: #f1efeb; color: #1F2933; } .report-request-modal .rr-close:focus-visible { outline: 2px solid var(--rr-accent, #893448); outline-offset: 2px; } /* --- Body ----------------------------------------------------------------- */ .report-request-modal .modal-body { padding: 1.5rem; overflow-y: auto; } .report-request-modal .rr-section { margin-bottom: 1.25rem; } /* Shiny's own stylesheet caps every .shiny-input-container at 300px. The text inputs escape it because they are built with width = "100%", but the format radiogroup and the consent checkbox would otherwise be boxed into a third of the modal — with the format cards' contents spilling out of their borders. */ .report-request-modal .shiny-input-container { width: 100%; max-width: 100%; } /* Section headings and the format picker's own