:root { /* Width controls: you can set a preferred pixel width and a viewport-relative width; the effective width will be the smaller of the two but never exceed --intro-dialog-max-width. These can be overridden in media queries for responsive tuning. */ --intro-dialog-width: 800px; /* preferred fixed width (px) */ --intro-dialog-width-vw: 92vw; /* viewport relative width */ --intro-dialog-min-width: 280px; /* absolute minimum width */ --intro-dialog-max-width: 900px; /* cap for the dialog */ /* Height controls: provide both viewport-relative and pixel options plus caps so you can choose which to prefer per breakpoint. */ --intro-vertical-height-vh: 70vh; /* viewport-relative preferred height */ --intro-vertical-height-px: 800px; /* preferred fixed height (px) */ --intro-vertical-min-height: 240px; /* absolute minimum height */ --intro-vertical-max-height: 1000px; /* hard max height (px) */ /* Spacing controls */ --intro-padding: 1.5rem; /* padding inside the modal body */ --intro-gap: 1rem; /* gap between image / title / text / footer */ /* Visuals */ --intro-bg: #ffffff; /* modal content background */ --intro-border-radius: 12px; --intro-dot-color: #d8d8d8; --intro-dot-active: #336ecc; } /* Keep stacking local to the intro modal so it doesn't affect global modals */ #introModal { z-index: 1080 !important; } /* Bootstrap inserts backdrop as a sibling under . Ensure it stays below intro modal. */ #introModal.show + .modal-backdrop.show, #introModal.show ~ .modal-backdrop.show { z-index: 1070 !important; } /* Dialog: center horizontally and vertically */ #introModal.modal.show { display: flex !important; align-items: center !important; justify-content: center !important; } #introModal .modal-dialog { /* Compute width from preferred px and viewport relative value, then cap */ width: min(var(--intro-dialog-width), var(--intro-dialog-width-vw)); max-width: var(--intro-dialog-max-width); min-width: var(--intro-dialog-min-width); margin: 0 auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* Content: white background, consistent padding and vertical layout */ #introModal .modal-content { background: var(--intro-bg); border-radius: var(--intro-border-radius); overflow: hidden; display: flex; flex-direction: column; width: 100%; /* Choose the smallest of the preferred px height, the viewport-relative height and the hard max height so the dialog never exceeds the cap. */ max-height: min(var(--intro-vertical-height-px), var(--intro-vertical-height-vh), var(--intro-vertical-max-height)); min-height: var(--intro-vertical-min-height); } #introModal .modal-body { padding: var(--intro-padding); display: flex; flex-direction: column; gap: var(--intro-gap); align-items: center; justify-content: flex-start; box-sizing: border-box; overflow: auto; } /* Panels wrapper and individual pages */ #introModal .intro-pages { width: 100%; display: flex; flex-direction: column; align-items: center; } #introModal .intro-page { display: none; width: 100%; text-align: center; } #introModal .intro-page.active { display: block; } /* Image/title/text layout — spacing controlled by variables */ #introModal .intro-emoji { width: 100%; text-align: center; } #introModal .intro-emoji img { max-width: 80%; height: auto; display: block; margin: 0 auto; } #introModal .modal-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; text-align: start; } #introModal .intro-title { font-size: 1.25rem; font-weight: 600; margin-top: 10px; margin-bottom: 10px; text-align: start; } #introModal .intro-text { color: #333; line-height: 1.4; margin: 0; text-align: start; padding: 0px; } .intro-progress-dots { display:flex; gap:0.5rem; align-items:center; } .intro-dot { width:10px; height:10px; background:var(--intro-dot-color); border-radius:50%; } .intro-dot.active { background:var(--intro-dot-active); } /* Footer spacing: reuse gap variable; ensure buttons align */ #introModal .modal-footer { padding: calc(var(--intro-padding) / 2); border: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--intro-gap); } /* Small visual tweaks kept minimal */ #introModal .modal-header { padding: 0.5rem 1rem; border-bottom: 0; } /* Accessibility helper: ensure modal doesn't accidentally hide when not shown */ .modal:not(.show) { display: none !important; } /* Breakpoints for fine-tuning. Override the variables above here as needed. Examples (commented) show how to tweak sizes per viewport. */ @media (min-width: 360px) { /* small phones: prefer near-full width and taller modal to allow scrolling (defaults are commented so you can enable or tweak per-project needs) */ /* --intro-dialog-width-vw: 96vw; */ /* --intro-dialog-width: 340px; */ /* --intro-dialog-max-width: 96vw; */ /* --intro-vertical-height-vh: 80vh; */ /* --intro-vertical-height-px: 560px; */ #introModal { --intro-dialog-width: 760px; --intro-dialog-width-vw: 80vw; --intro-vertical-height-vh: 70vh; } #introModal .modal-header { margin-top: 10px; } #introModal .modal-footer { margin-left: 0px; margin-right: 0px; margin-bottom: 10px; } /* Reduce button visual footprint on small phones (360px breakpoint). Target the action buttons used on the page so intro modal buttons and page action buttons both behave well at this size. */ .intro-modal-buttons-div .btn-action { /* allow buttons to shrink when space is tight */ min-width: 0; flex: 0 1 auto; /* reduce padding and font-size to make buttons narrower */ padding: 0.45rem 0.7rem; font-size: 0.95rem; white-space: nowrap; } /* Keep intro modal's Back/Next reasonable but compact */ #introModal .modal-footer .btn-action { padding: 0.35rem 1.8rem; font-size: 0.95rem; min-width: 0; flex: 0 1 auto; border-radius: 7px; } #introBackBtn { border-radius: 7px; } } @media (min-width: 412px) { /* larger phones */ /* --intro-dialog-width-vw: 88vw; */ /* --intro-dialog-width: 420px; */ /* --intro-vertical-height-vh: 76vh; */ /* --intro-vertical-height-px: 640px; */ #introModal { --intro-vertical-height-vh: 85vh; --intro-vertical-height-px: 800px; } #introModal .intro-emoji img { max-width: 90%; } #introModal .modal-header { margin-left: 20px; margin-right: 20px; } #introModal .modal-footer { margin-left: 20px; margin-right: 20px; margin-bottom: 30px; } } @media (min-width: 440px) { /* narrow phablets */ /* --intro-dialog-width-vw: 84vw; */ /* --intro-dialog-width: 480px; */ /* --intro-vertical-height-vh: 72vh; */ /* --intro-vertical-height-px: 700px; */ #introModal { --intro-vertical-height-vh: 85vh; } } @media (min-width: 576px) { /* tablets and up */ /* tablets */ /* --intro-dialog-width: 720px; */ /* --intro-dialog-width-vw: 80vw; */ /* --intro-vertical-height-vh: 70vh; */ /* --intro-vertical-height-px: 760px; */ } @media (min-width: 768px) { /* small laptops */ /* --intro-dialog-width: 760px; */ /* --intro-dialog-width-vw: 65vw; */ /* --intro-vertical-height-vh: 72vh; */ /* --intro-vertical-height-px: 820px; */ #introModal { --intro-dialog-width: 760px; --intro-dialog-width-vw: 65vw; --intro-vertical-height-vh: 90vh; --intro-vertical-min-height: 800px; } #introModal .intro-emoji img { max-width: 60%; } } @media (min-width: 834px) { /* medium desktops */ /* --intro-dialog-width: 700px; */ /* --intro-dialog-width-vw: 60vw; */ /* --intro-vertical-height-vh: 75vh; */ /* --intro-vertical-height-px: 900px; */ #introModal { --intro-dialog-width: 760px; --intro-dialog-width-vw: 65vw; --intro-vertical-height-vh: 90vh; --intro-vertical-height-px: 970px; } #introModal .intro-emoji img { max-width: 90%; } } @media (min-width: 894px) { /* medium desktops */ /* --intro-dialog-width: 700px; */ /* --intro-dialog-width-vw: 60vw; */ /* --intro-vertical-height-vh: 75vh; */ /* --intro-vertical-height-px: 900px; */ #introModal { --intro-vertical-height-vh: 90vh; --intro-vertical-height-px: 1000px; } #introModal .intro-emoji img { max-width: 90%; } #introModal .intro-title { margin-left:20px; margin-right:20px; font-weight:700; } #introModal .intro-text { margin-left: 20px; margin-right: 20px; } #introModal .modal-footer { margin-left: 40px; margin-right: 40px; margin-bottom:30px; } } @media (min-width: 1400px) { /* large desktops */ /* --intro-dialog-width: 760px; */ /* --intro-dialog-width-vw: 50vw; */ /* --intro-vertical-height-vh: 80vh; */ /* --intro-vertical-height-px: 1000px; */ #introModal { --intro-vertical-min-height: 740px; /* absolute minimum height */ } } @media (min-width: 1980px) { /* extra-large screens */ /* --intro-dialog-width: 720px; */ /* --intro-dialog-width-vw: 45vw; */ /* --intro-vertical-height-vh: 80vh; */ /* --intro-vertical-height-px: 1100px; */ } /* End simplified intro modal CSS */