/* * Municipal News Pro v1.0.0 — Frontend styles. * AAA-only palette: #FFFFFF on #003b49/#1d4289/#1b365d/#000000; * #003b49 on #FFFFFF/#d6d2c4/#ffc845/#f2c75c/#d0d3d4; * #1b365d on #FFFFFF/#f2c75c/#d0d3d4; #d6d2c4/#ffc845 on #1b365d/#000000. * LVHA order enforced: :link -> :visited -> :hover -> :active. * REM units only. */ .mnp { font-size: 1rem; line-height: 1.6; color: #003b49; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem; } .mnp * { box-sizing: border-box; } .mnp h1, .mnp h2, .mnp h3 { color: #1b365d; line-height: 1.2; margin: 0 0 0.5rem; } .mnp-visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mnp-gold-rule { display: block; width: 3.5rem; height: 0.25rem; background: #ffc845; border-radius: 0.125rem; margin: 0.25rem 0 1.25rem; } .mnp-empty { background: #d0d3d4; color: #003b49; border-radius: 0.5rem; padding: 1rem 1.25rem; } /* ---------------- Buttons: bg + text declared in EVERY state ------ * Dual-scoped (.mnp and .mnp-modal-backdrop) with !important so theme * global button/link colors can never override the AAA palette. * The modal is appended to , outside .mnp, hence the dual scope. */ .mnp .mnp-btn, .mnp-modal-backdrop .mnp-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1rem; border-radius: 62.4375rem; padding: 0.625rem 1.5rem; border: 0.125rem solid transparent; cursor: pointer; text-decoration: none !important; transition: background-color 0.15s ease, color 0.15s ease; box-shadow: none !important; text-transform: none; } .mnp .mnp-btn-navy, .mnp-modal-backdrop .mnp-btn-navy { background: #1b365d !important; color: #ffffff !important; border-color: #1b365d !important; } .mnp a.mnp-btn-navy:link { background: #1b365d !important; color: #ffffff !important; } .mnp a.mnp-btn-navy:visited { background: #1b365d !important; color: #ffffff !important; } .mnp .mnp-btn-navy:hover, .mnp-modal-backdrop .mnp-btn-navy:hover { background: #003b49 !important; color: #ffffff !important; border-color: #003b49 !important; } .mnp .mnp-btn-navy:focus, .mnp-modal-backdrop .mnp-btn-navy:focus { background: #003b49 !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-btn-navy:active, .mnp-modal-backdrop .mnp-btn-navy:active { background: #000000 !important; color: #ffffff !important; } .mnp .mnp-btn-navy:disabled, .mnp-modal-backdrop .mnp-btn-navy:disabled { background: #d0d3d4 !important; color: #003b49 !important; cursor: not-allowed; } .mnp .mnp-btn-gold, .mnp-modal-backdrop .mnp-btn-gold { background: #ffc845 !important; color: #003b49 !important; border-color: #ffc845 !important; } .mnp a.mnp-btn-gold:link { background: #ffc845 !important; color: #003b49 !important; } .mnp a.mnp-btn-gold:visited { background: #ffc845 !important; color: #003b49 !important; } .mnp .mnp-btn-gold:hover, .mnp-modal-backdrop .mnp-btn-gold:hover { background: #f2c75c !important; color: #1b365d !important; } .mnp .mnp-btn-gold:focus, .mnp-modal-backdrop .mnp-btn-gold:focus { background: #f2c75c !important; color: #1b365d !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-btn-gold:active, .mnp-modal-backdrop .mnp-btn-gold:active { background: #1b365d !important; color: #ffc845 !important; } .mnp .mnp-btn-gold:disabled, .mnp-modal-backdrop .mnp-btn-gold:disabled { background: #d0d3d4 !important; color: #003b49 !important; cursor: not-allowed; } .mnp .mnp-btn-outline, .mnp-modal-backdrop .mnp-btn-outline { background: #ffffff !important; color: #1b365d !important; border-color: #1b365d !important; } .mnp a.mnp-btn-outline:link { background: #ffffff !important; color: #1b365d !important; } .mnp a.mnp-btn-outline:visited { background: #ffffff !important; color: #1b365d !important; } .mnp .mnp-btn-outline:hover, .mnp-modal-backdrop .mnp-btn-outline:hover { background: #1b365d !important; color: #ffffff !important; border-color: #1b365d !important; } .mnp .mnp-btn-outline:focus, .mnp-modal-backdrop .mnp-btn-outline:focus { background: #1b365d !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-btn-outline:active, .mnp-modal-backdrop .mnp-btn-outline:active { background: #000000 !important; color: #ffffff !important; } .mnp .mnp-btn-outline:disabled, .mnp-modal-backdrop .mnp-btn-outline:disabled { background: #d0d3d4 !important; color: #003b49 !important; cursor: not-allowed; } .mnp .mnp-btn-danger, .mnp-modal-backdrop .mnp-btn-danger { background: #ffffff !important; color: #1b365d !important; border-color: #1b365d !important; } .mnp .mnp-btn-danger:hover, .mnp-modal-backdrop .mnp-btn-danger:hover { background: #000000 !important; color: #ffffff !important; } .mnp .mnp-btn-danger:focus, .mnp-modal-backdrop .mnp-btn-danger:focus { background: #000000 !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-btn-danger:active, .mnp-modal-backdrop .mnp-btn-danger:active { background: #000000 !important; color: #ffc845 !important; } .mnp .mnp-btn svg, .mnp-modal-backdrop .mnp-btn svg { flex: 0 0 auto; } /* ---------------- Featured widget (mockup) ---------------- */ .mnp-widget-title { font-size: 2.25rem; font-weight: 800; } .mnp-widget-list { list-style: none; margin: 0; padding: 0; } .mnp-widget-item { border-bottom: 0.0625rem solid #d0d3d4; } .mnp-widget-item:last-child { border-bottom: 0.0625rem solid #d0d3d4; } .mnp-widget-link { display: block; padding: 1.125rem 0; text-decoration: none; border-radius: 0.375rem; } .mnp-widget-link:link .mnp-widget-headline { color: #1b365d; } .mnp-widget-link:visited .mnp-widget-headline { color: #1b365d; } .mnp-widget-link:hover .mnp-widget-headline { color: #1d4289; text-decoration: underline; } .mnp-widget-link:active .mnp-widget-headline { color: #003b49; } .mnp-widget-link:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp-widget-headline { display: block; font-weight: 700; font-size: 1.125rem; color: #1b365d; } .mnp-widget-headline time { font-weight: 700; } .mnp-sep { padding: 0 0.25rem; } .mnp-widget-excerpt { display: block; color: #003b49; margin-top: 0.25rem; } .mnp-widget-cta { margin-top: 1.5rem; } /* ---------------- Filters ---------------- */ .mnp-filters { display: flex; flex-wrap: wrap; gap: 1rem; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .mnp-filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; } .mnp-filter-search { flex: 1 1 16rem; } .mnp-label { font-weight: 700; color: #1b365d; font-size: 0.875rem; } .mnp-input-wrap { display: flex; align-items: center; gap: 0.5rem; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.5rem; padding: 0 0.75rem; color: #003b49; } .mnp-input-wrap input { border: 0; background: transparent; color: #003b49; padding: 0.625rem 0; width: 100%; font-size: 1rem; } .mnp-input-wrap input:focus { outline: none; } .mnp-input-wrap:focus-within { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp select, .mnp input[type="text"], .mnp input[type="search"], .mnp input[type="date"], .mnp input[type="url"], .mnp textarea { font-size: 1rem; color: #003b49; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.5rem; padding: 0.625rem 0.75rem; } .mnp select:focus, .mnp input:focus, .mnp textarea:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.0625rem; } /* ---------------- Card grid (archive + related) ---------------- */ .mnp-card-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; } .mnp-card { flex: 0 1 auto; width: 31%; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; } .mnp-card-media { background: #1b365d; height: 10rem; display: flex; align-items: center; justify-content: center; color: #d6d2c4; } .mnp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mnp-card-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; } .mnp-badge { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; background: #d6d2c4; color: #003b49; font-weight: 700; font-size: 0.8125rem; border-radius: 62.4375rem; padding: 0.25rem 0.75rem; } .mnp-card-date { color: #003b49; font-size: 0.875rem; font-weight: 700; } .mnp-card-title { font-size: 1.1875rem; margin: 0; } .mnp-card-title a { text-decoration: none; } .mnp-card-title a:link { color: #1b365d; } .mnp-card-title a:visited { color: #1b365d; } .mnp-card-title a:hover { color: #1d4289; text-decoration: underline; } .mnp-card-title a:active { color: #003b49; } .mnp-card-title a:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp-card-excerpt { color: #003b49; margin: 0; } .mnp-card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; text-decoration: none; } .mnp-card-more:link { color: #1d4289; } .mnp-card-more:visited { color: #1d4289; } .mnp-card-more:hover { color: #1b365d; text-decoration: underline; } .mnp-card-more:active { color: #003b49; } .mnp-card-more:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } /* ---------------- Pagination ---------------- */ .mnp-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .mnp .mnp-page-btn { background: #ffffff !important; color: #1b365d !important; border: 0.0625rem solid #1b365d !important; border-radius: 0.5rem; padding: 0.5rem 0.875rem; font-weight: 700; cursor: pointer; box-shadow: none !important; } .mnp .mnp-page-btn:hover { background: #1b365d !important; color: #ffffff !important; } .mnp .mnp-page-btn:focus { background: #1b365d !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-page-btn:active { background: #000000 !important; color: #ffffff !important; } .mnp .mnp-page-btn.is-current { background: #1b365d !important; color: #ffffff !important; cursor: default; } /* ---------------- Single article ---------------- */ .mnp-breadcrumb { margin-bottom: 1rem; } .mnp-breadcrumb a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 700; text-decoration: none; } .mnp-breadcrumb a:link { color: #1d4289; } .mnp-breadcrumb a:visited { color: #1d4289; } .mnp-breadcrumb a:hover { color: #1b365d; text-decoration: underline; } .mnp-breadcrumb a:active { color: #003b49; } .mnp-breadcrumb a:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp-single-title { font-size: 2.5rem; } .mnp-single-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #003b49; font-weight: 700; margin: 0 0 1.25rem; } .mnp-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; } .mnp-single-figure { margin: 0 0 1.5rem; border-radius: 0.75rem; overflow: hidden; } .mnp-single-figure img { display: block; width: 100%; height: auto; } .mnp-single-content { font-size: 1.0625rem; max-width: 48rem; } .mnp-single-content a:link { color: #1d4289; } .mnp-single-content a:visited { color: #1b365d; } .mnp-single-content a:hover { color: #1b365d; text-decoration: underline; } .mnp-single-content a:active { color: #003b49; } .mnp-single-content a:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp-single-footer { display: flex; flex-wrap: wrap; gap: 0.75rem; border-top: 0.0625rem solid #d0d3d4; margin-top: 2rem; padding-top: 1.25rem; } .mnp-related { margin-top: 2.5rem; } /* ---------------- Admin dashboard (LatePoint aesthetic) ----------- */ /* Embedded management console — Municipal Calendar Pro style: * dark inner sidebar with grouped nav + switching panels. */ .mnp-console { display: flex; align-items: stretch; gap: 0; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; overflow: hidden; padding: 0; } .mnp-console-side { flex: 0 0 15rem; background: #1b365d; color: #ffffff; padding: 1.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .mnp-console-brand { display: flex; align-items: center; gap: 0.625rem; color: #ffffff; font-weight: 800; font-size: 1.125rem; line-height: 1.25; padding: 0 1.25rem 1rem; border-bottom: 0.0625rem solid #003b49; } .mnp-console-nav { display: flex; flex-direction: column; } .mnp-console-group { display: block; color: #d6d2c4; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 1rem 1.25rem 0.375rem; } .mnp .mnp-console-link { display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left; background: #1b365d !important; color: #ffffff !important; border: 0; border-left: 0.25rem solid transparent; font-size: 1rem; font-weight: 700; padding: 0.75rem 1.25rem; cursor: pointer; box-shadow: none !important; } .mnp .mnp-console-link:hover { background: #003b49 !important; color: #ffffff !important; } .mnp .mnp-console-link:focus { background: #003b49 !important; color: #ffffff !important; outline: 0.1875rem solid #ffc845; outline-offset: -0.1875rem; } .mnp .mnp-console-link:active { background: #000000 !important; color: #ffffff !important; } .mnp .mnp-console-link.is-active { background: #003b49 !important; color: #ffffff !important; border-left-color: #ffc845; } .mnp-console-main { flex: 1 1 auto; min-width: 0; padding: 1.5rem; background: #ffffff; } .mnp-console-title { font-size: 1.75rem; margin-bottom: 1.25rem; } .mnp-console-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .mnp-console-head-row .mnp-console-title { margin-bottom: 0; } .mnp-console-card { background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; margin-top: 1.5rem; overflow: hidden; } .mnp-console-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 0.0625rem solid #d0d3d4; } .mnp-console-card-head h2 { margin: 0; font-size: 1.25rem; } .mnp-table-flat { border: 0; border-radius: 0; } .mnp .mnp-linklike { background: transparent !important; border: 0; padding: 0; color: #1b365d !important; font-size: 1rem; cursor: pointer; text-align: left; box-shadow: none !important; } .mnp .mnp-linklike:hover { background: transparent !important; color: #1d4289 !important; text-decoration: underline; } .mnp .mnp-linklike:focus { background: transparent !important; color: #1d4289 !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-linklike:active { background: transparent !important; color: #003b49 !important; } .mnp-cat-chip { display: inline-block; background: #d6d2c4; color: #003b49; font-weight: 700; font-size: 0.8125rem; border-radius: 62.4375rem; padding: 0.25rem 0.75rem; } .mnp-admin-topbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .mnp-stat-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .mnp-stat-card { flex: 1 1 10rem; background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; padding: 1rem 1.25rem; } .mnp-stat-value { display: block; font-size: 1.75rem; font-weight: 800; color: #1b365d; } .mnp-stat-label { display: block; font-weight: 700; color: #003b49; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Tinted tiles (Overview) — AAA: #FFFFFF on #1b365d, #d6d2c4 on #1b365d, * #FFFFFF on #003b49, #d6d2c4 on #003b49-equivalent navy family. */ .mnp-stat-card.mnp-stat-navy { background: #1b365d; border-color: #1b365d; } .mnp-stat-card.mnp-stat-navy .mnp-stat-value { color: #ffffff; } .mnp-stat-card.mnp-stat-navy .mnp-stat-label { color: #d6d2c4; } .mnp-stat-card.mnp-stat-teal { background: #003b49; border-color: #003b49; } .mnp-stat-card.mnp-stat-teal .mnp-stat-value { color: #ffffff; } .mnp-stat-card.mnp-stat-teal .mnp-stat-label { color: #d6d2c4; } .mnp-admin-tabs { display: flex; gap: 1.5rem; border-bottom: 0.125rem solid #d0d3d4; margin-bottom: 1.25rem; } .mnp .mnp-tab { background: #ffffff !important; color: #003b49 !important; border: 0; border-bottom: 0.1875rem solid transparent; font-weight: 700; font-size: 1rem; padding: 0.75rem 0.25rem; cursor: pointer; margin-bottom: -0.125rem; box-shadow: none !important; } .mnp .mnp-tab:hover { background: #ffffff !important; color: #1d4289 !important; } .mnp .mnp-tab:focus { background: #ffffff !important; color: #1d4289 !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-tab:active { background: #ffffff !important; color: #1b365d !important; } .mnp .mnp-tab.is-active { color: #1b365d !important; border-bottom-color: #ffc845; } .mnp-admin-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .mnp-admin-toolbar .mnp-input-wrap { flex: 1 1 16rem; } .mnp-table-wrap { background: #ffffff; border: 0.0625rem solid #d0d3d4; border-radius: 0.75rem; overflow-x: auto; } .mnp-table { width: 100%; border-collapse: collapse; } .mnp-table th { text-align: left; background: #1b365d; color: #ffffff; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.75rem 1rem; } .mnp-table td { padding: 0.75rem 1rem; border-top: 0.0625rem solid #d0d3d4; color: #003b49; vertical-align: middle; } .mnp-status-pill { display: inline-block; font-weight: 700; font-size: 0.8125rem; border-radius: 62.4375rem; padding: 0.25rem 0.75rem; } .mnp-status-publish { background: #003b49; color: #ffffff; } .mnp-status-draft { background: #d6d2c4; color: #003b49; } .mnp-row-actions { display: flex; gap: 0.5rem; } .mnp .mnp-icon-btn { background: #ffffff !important; color: #1b365d !important; border: 0.0625rem solid #1b365d !important; border-radius: 0.5rem; padding: 0.375rem 0.75rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; text-decoration: none !important; box-shadow: none !important; } .mnp .mnp-icon-btn:hover { background: #1b365d !important; color: #ffffff !important; } .mnp .mnp-icon-btn:focus { background: #1b365d !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp .mnp-icon-btn:active { background: #000000 !important; color: #ffffff !important; } /* ---------------- Modal ---------------- */ .mnp-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; z-index: 99999; overflow-y: auto; } .mnp-modal { background: #ffffff; border-radius: 0.75rem; overflow: hidden; /* keeps close button clipped inside radius */ width: 100%; max-width: 46rem; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3); } .mnp-modal-head { display: flex; align-items: center; justify-content: space-between; background: #ffffff; color: #1b365d; padding: 1rem 1.25rem; border-bottom: 0.25rem solid #ffc845; } .mnp-modal-head h2 { color: #1b365d !important; margin: 0; font-size: 1.25rem; } .mnp-modal-backdrop .mnp-modal-close { background: #ffffff !important; color: #1b365d !important; border: 0.0625rem solid #1b365d !important; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.625rem; border-radius: 0.375rem; box-shadow: none !important; } .mnp-modal-backdrop .mnp-modal-close:hover { background: #1b365d !important; color: #ffffff !important; } .mnp-modal-backdrop .mnp-modal-close:focus { background: #1b365d !important; color: #ffffff !important; outline: 0.1875rem solid #1d4289; outline-offset: 0.125rem; } .mnp-modal-backdrop .mnp-modal-close:active { background: #000000 !important; color: #ffffff !important; } .mnp-modal-backdrop .mnp-label { font-weight: 700; color: #1b365d; font-size: 0.875rem; } .mnp-modal-backdrop select, .mnp-modal-backdrop input[type="text"], .mnp-modal-backdrop input[type="search"], .mnp-modal-backdrop input[type="date"], .mnp-modal-backdrop input[type="url"], .mnp-modal-backdrop textarea { font-size: 1rem; color: #003b49 !important; background: #ffffff !important; border: 0.0625rem solid #d0d3d4; border-radius: 0.5rem; padding: 0.625rem 0.75rem; } .mnp-modal-backdrop select:focus, .mnp-modal-backdrop input:focus, .mnp-modal-backdrop textarea:focus { outline: 0.1875rem solid #1d4289; outline-offset: 0.0625rem; } .mnp-modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .mnp-field { display: flex; flex-direction: column; gap: 0.25rem; } .mnp-field-row { display: flex; flex-wrap: wrap; gap: 1rem; } .mnp-field-row .mnp-field { flex: 1 1 14rem; } .mnp-field textarea { min-height: 6rem; resize: vertical; } .mnp-field textarea.mnp-content-area { min-height: 14rem; } .mnp-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #1b365d; } .mnp-modal-foot { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.25rem; background: #d0d3d4; } /* External link confirmation modal reuses .mnp-modal */ .mnp-ext-url { background: #d0d3d4; color: #003b49; border-radius: 0.5rem; padding: 0.75rem 1rem; word-break: break-all; font-weight: 700; } /* ---------------- Featured image picker ---------------- */ .mnp-img-picker { display: flex; flex-direction: column; gap: 0.5rem; } .mnp-img-preview { background: #d0d3d4; color: #003b49; border: 0.0625rem solid #d0d3d4; border-radius: 0.5rem; min-height: 6rem; display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; } .mnp-img-preview img { display: block; width: 100%; height: 8rem; object-fit: cover; } .mnp-img-picker-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ---------------- Toast ---------------- */ .mnp-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #1b365d; color: #ffffff; font-weight: 700; border-radius: 0.5rem; padding: 0.875rem 1.25rem; z-index: 100000; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3); } /* ---------------- Responsive ---------------- */ @media (max-width: 64rem) { .mnp-card { width: 48%; } } @media (max-width: 40rem) { .mnp-card { width: 100%; } .mnp-single-title { font-size: 1.875rem; } .mnp-widget-title { font-size: 1.75rem; } .mnp-filters { flex-direction: column; } .mnp-filter-field { min-width: 100%; } } @media (max-width: 48rem) { .mnp-console { flex-direction: column; } .mnp-console-side { flex: 1 1 auto; padding: 0.75rem 0; } .mnp-console-brand { padding-bottom: 0.75rem; } .mnp-console-nav { flex-direction: row; flex-wrap: wrap; } .mnp-console-group { display: none; } .mnp .mnp-console-link { width: auto; border-left: 0; border-bottom: 0.25rem solid transparent; padding: 0.625rem 1rem; } .mnp .mnp-console-link.is-active { border-left: 0; border-bottom-color: #ffc845; } .mnp-console-main { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { .mnp * { transition: none !important; } }