/* ────────────────────────────────────────────────────────────────────────── LMS Modern Search UI — opt-in via ?ui=modern or LMSOptions default Scoped under .lmsm-* to avoid collisions with global Bootstrap classes. ──────────────────────────────────────────────────────────────────────── */ /* Ensure the iframe document fills its viewport so the modern shell's fixed-height + inner-scroll layout works. This file is only loaded inside the modern search iframe, so global html/body rules are safe. */ html, body { height: 100%; margin: 0; } /* JH/Claude 9/24/26: variables also scoped to .lmsm-modal-backdrop — the filter modal is reparented to at init (search_js_modern.cfm) to escape transformed theme wrappers that broke its position:fixed on mobile, so it no longer inherits them from the shell */ .lmsm-shell, .lmsm-modal-backdrop { --lmsm-bg: #f7f8fb; --lmsm-surface: #ffffff; --lmsm-border: #e6e8ef; --lmsm-text: #0f172a; --lmsm-muted: #64748b; --lmsm-primary: #1f4397; --lmsm-primary-50: #eef2fb; --lmsm-accent: #0e9f6e; --lmsm-accent-50: #e6f7f0; --lmsm-warn: #b45309; --lmsm-warn-50: #fff7e6; --lmsm-danger: #b91c1c; --lmsm-danger-50: #fdecec; --lmsm-radius: 14px; --lmsm-radius-sm: 10px; --lmsm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 0 rgba(15, 23, 42, .02); --lmsm-shadow-lg: 0 8px 24px rgba(15, 23, 42, .08); } .lmsm-modal-backdrop { font-family: 'Urbanist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--lmsm-text); } .lmsm-modal-backdrop *, .lmsm-modal-backdrop *::before, .lmsm-modal-backdrop *::after { box-sizing: border-box; } .lmsm-shell { font-family: 'Urbanist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--lmsm-text); background: var(--lmsm-bg); height: 100vh; height: 100dvh; /* dynamic viewport height for mobile browsers */ display: flex; flex-direction: column; } .lmsm-shell *, .lmsm-shell *::before, .lmsm-shell *::after { box-sizing: border-box; } .lmsm-shell button { font-family: inherit; cursor: pointer; } /* ───────── Hero ───────── */ .lmsm-hero { background: var(--lmsm-surface); border-bottom: 1px solid var(--lmsm-border); padding: 16px 20px 0; position: sticky; top: 0; z-index: 5; } .lmsm-hero-row { display: grid; grid-template-columns: 1.4fr 1fr 110px auto auto; gap: 10px; align-items: center; } .lmsm-input { display: flex; align-items: center; gap: 8px; background: var(--lmsm-bg); border: 1px solid var(--lmsm-border); border-radius: var(--lmsm-radius-sm); padding: 0 12px; height: 44px; transition: border-color .15s, box-shadow .15s; } .lmsm-input:focus-within { border-color: var(--lmsm-primary); box-shadow: 0 0 0 3px rgba(31, 67, 151, .12); background: var(--lmsm-surface); } .lmsm-input i { color: var(--lmsm-muted); font-size: 14px; } .lmsm-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--lmsm-text); min-width: 0; } .lmsm-input input::placeholder { color: var(--lmsm-muted); } .lmsm-icon-btn { background: transparent; border: 0; color: var(--lmsm-muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; padding: 0; font-size: 14px; text-decoration: none; } .lmsm-icon-btn:hover { background: var(--lmsm-primary-50); color: var(--lmsm-primary); } .lmsm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--lmsm-radius-sm); border: 1px solid var(--lmsm-border); background: var(--lmsm-surface); color: var(--lmsm-text); font-size: 14px; font-weight: 600; transition: all .15s; white-space: nowrap; } .lmsm-btn:hover { border-color: var(--lmsm-primary); color: var(--lmsm-primary); } .lmsm-btn-primary { background: var(--lmsm-primary); border-color: var(--lmsm-primary); color: #fff; } .lmsm-btn-primary:hover { background: #18347a; border-color: #18347a; color: #fff; } .lmsm-btn-ghost { background: transparent; } .lmsm-filter-count { background: var(--lmsm-primary); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; } /* ───────── Toolbar (toggle + count + map) ───────── */ .lmsm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 12px; flex-wrap: wrap; } .lmsm-toggle { display: inline-flex; background: var(--lmsm-bg); border: 1px solid var(--lmsm-border); border-radius: 999px; padding: 4px; gap: 2px; } .lmsm-toggle-btn { border: 0; background: transparent; color: var(--lmsm-muted); height: 34px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, background .15s; } .lmsm-toggle-btn i { font-size: 9px; } .lmsm-toggle-btn:hover { color: var(--lmsm-text); } .lmsm-toggle-btn.is-active { background: var(--lmsm-surface); color: var(--lmsm-primary); box-shadow: var(--lmsm-shadow); } .lmsm-toggle-btn[data-tab="live"] i { color: #ef4444; } .lmsm-toolbar-right { display: flex; align-items: center; gap: 12px; } .lmsm-result-count { font-size: 13px; font-weight: 600; color: var(--lmsm-muted); } .lmsm-map-toggle { height: 36px; padding: 0 12px; font-size: 13px; } /* ───────── Chips ───────── */ .lmsm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; } .lmsm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--lmsm-primary-50); color: var(--lmsm-primary); border: 0; border-radius: 999px; padding: 5px 10px 5px 12px; font-size: 12px; font-weight: 500; transition: background .15s; } .lmsm-chip:hover { background: #d8e1f4; } .lmsm-chip-label { color: var(--lmsm-muted); font-weight: 400; } .lmsm-chip i { font-size: 10px; opacity: .7; } /* ───────── Main layout ───────── */ .lmsm-main { flex: 1; display: grid; grid-template-columns: 1fr 0; gap: 0; overflow: hidden; min-height: 0; } .lmsm-shell.lmsm-map-open .lmsm-main { grid-template-columns: 1fr minmax(320px, 38%); } .lmsm-results { overflow-y: auto; padding: 24px 20px 60px; } .lmsm-mappanel { border-left: 1px solid var(--lmsm-border); overflow: hidden; display: none; } .lmsm-shell.lmsm-map-open .lmsm-mappanel { display: block; } .lmsm-mappanel #map-canvas { width: 100%; height: 100%; } .lmsm-marker { font-size: 24px; color: #ef4444; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); } /* ───────── Sections (date buckets) ───────── */ .lmsm-section { margin-bottom: 28px; } .lmsm-section-title { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 700; color: var(--lmsm-text); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lmsm-border); position: sticky; top: 0; background: var(--lmsm-bg); z-index: 1; padding-top: 4px; } .lmsm-section-count { font-size: 12px; font-weight: 600; color: var(--lmsm-muted); background: var(--lmsm-surface); border: 1px solid var(--lmsm-border); padding: 2px 8px; border-radius: 999px; } .lmsm-section-ondemand .lmsm-section-title { color: var(--lmsm-text); } /* ───────── Grid + cards ───────── */ .lmsm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .lmsm-card { background: var(--lmsm-surface); border: 1px solid var(--lmsm-border); border-radius: var(--lmsm-radius); overflow: hidden; box-shadow: var(--lmsm-shadow); transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; cursor: pointer; } .lmsm-card:hover { transform: translateY(-2px); box-shadow: var(--lmsm-shadow-lg); border-color: #cbd5e1; } .lmsm-card-inner { display: contents; } .lmsm-card-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #d8e1f4 0%, #f0f4ff 100%) center / cover; } .lmsm-card-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; } .lmsm-badge { background: rgba(255, 255, 255, .95); color: var(--lmsm-text); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); letter-spacing: .02em; } .lmsm-badge-live { color: #b91c1c; } .lmsm-badge-live i { color: #ef4444; font-size: 7px; animation: lmsmPulse 2s infinite; } .lmsm-badge-ondemand { color: var(--lmsm-primary); } .lmsm-badge-ondemand i { font-size: 9px; } .lmsm-badge-status { font-size: 10px; padding: 3px 8px; } .lmsm-badge-success { background: var(--lmsm-accent-50); color: var(--lmsm-accent); } .lmsm-badge-info { background: var(--lmsm-primary-50); color: var(--lmsm-primary); } .lmsm-badge-warning { background: var(--lmsm-warn-50); color: var(--lmsm-warn); } .lmsm-badge-important { background: var(--lmsm-danger-50); color: var(--lmsm-danger); } .lmsm-badge-prereq { background: #f0e8fd; color: #6d3abf; cursor: help; } .lmsm-badge-prereq i { font-size: 9px; } /* ───────── Favorite heart button ───────── */ .lmsm-card { position: relative; } .lmsm-fav-btn { position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #6b7280; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: color .15s, transform .15s, background .15s; padding: 0; } .lmsm-fav-btn:hover { color: #ef4444; transform: scale(1.08); background: #fff; } .lmsm-fav-btn:focus-visible { outline: 2px solid var(--lmsm-primary); outline-offset: 2px; } .lmsm-fav-btn.active { color: #ef4444; } .lmsm-card:has(.lmsm-fav-btn) .lmsm-card-badges { right: 52px; } /* ───────── Favorites section ───────── */ .lmsm-section-favorites .lmsm-section-title { color: #b91c1c; border-bottom-color: #fecaca; } .lmsm-section-fav-icon { color: #ef4444; margin-right: 6px; } /* ───────── Featured section ───────── */ .lmsm-section-featured .lmsm-section-title { color: #b45309; border-bottom-color: #fde68a; } .lmsm-section-featured-icon { color: #f59e0b; margin-right: 6px; } @keyframes lmsmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .lmsm-card-body { padding: 14px 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .lmsm-card-title { font-size: 15px; font-weight: 700; color: var(--lmsm-text); margin: 0 0 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lmsm-card-meta { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--lmsm-text); line-height: 1.4; } .lmsm-card-meta i { color: var(--lmsm-muted); font-size: 12px; margin-top: 3px; flex-shrink: 0; } .lmsm-card-meta-muted { color: var(--lmsm-muted); } .lmsm-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .lmsm-tag { font-size: 11px; font-weight: 500; color: var(--lmsm-muted); background: var(--lmsm-bg); padding: 2px 8px; border-radius: 6px; } .lmsm-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--lmsm-border); margin-top: auto; } .lmsm-card-cost { font-size: 14px; font-weight: 700; } .lmsm-card-cost-paid { color: var(--lmsm-text); } .lmsm-card-cost-free { color: var(--lmsm-accent); } .lmsm-card-actions { display: flex; align-items: center; gap: 4px; } .lmsm-view-btn { background: var(--lmsm-primary); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; text-decoration: none; transition: background .15s; margin-left: 4px; } .lmsm-view-btn:hover { background: #18347a; color: #fff; text-decoration: none; } /* ───────── Empty + loading states ───────── */ .lmsm-empty { text-align: center; padding: 60px 20px; color: var(--lmsm-muted); } .lmsm-empty i { font-size: 40px; margin-bottom: 12px; opacity: .5; } .lmsm-empty p { font-size: 15px; margin: 0 0 14px; } .lmsm-link { background: transparent; border: 0; color: var(--lmsm-primary); font-size: 14px; font-weight: 600; text-decoration: underline; padding: 4px 8px; } .lmsm-loading { text-align: center; padding: 60px 20px; color: var(--lmsm-muted); font-size: 14px; } .lmsm-loading i { margin-right: 8px; } /* ───────── Filter modal ───────── */ .lmsm-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: lmsmFade .15s; } .lmsm-modal-backdrop[hidden] { display: none; } @keyframes lmsmFade { from { opacity: 0; } to { opacity: 1; } } .lmsm-modal { background: var(--lmsm-surface); border-radius: var(--lmsm-radius); width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } .lmsm-modal-head, .lmsm-modal-foot { padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .lmsm-modal-head { border-bottom: 1px solid var(--lmsm-border); justify-content: space-between; } .lmsm-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; } .lmsm-modal-body { padding: 20px; overflow-y: auto; flex: 1; } .lmsm-modal-foot { border-top: 1px solid var(--lmsm-border); justify-content: flex-end; } .lmsm-filter-group { margin-bottom: 18px; } .lmsm-filter-label { font-size: 13px; font-weight: 700; color: var(--lmsm-text); margin-bottom: 8px; letter-spacing: .02em; } .lmsm-filter-control { display: flex; flex-wrap: wrap; gap: 8px; } .lmsm-text-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--lmsm-border); border-radius: 8px; font: inherit; font-size: 13px; } .lmsm-text-input:focus { outline: 0; border-color: var(--lmsm-primary); } .lmsm-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--lmsm-border); border-radius: 8px; transition: background .15s, border-color .15s; } .lmsm-checkbox:has(input:checked) { background: var(--lmsm-primary-50); border-color: var(--lmsm-primary); color: var(--lmsm-primary); } /* Numrange (modal) */ .lmsm-numrange { width: 100%; padding: 4px 0; } .lmsm-numrange-display { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .lmsm-numrange-display span { background: var(--lmsm-bg); border-radius: 8px; padding: 4px 12px; min-width: 60px; text-align: center; } .lmsm-numrange-display .lmsm-numrange-dash { background: none; color: var(--lmsm-muted); min-width: auto; padding: 0; font-weight: 400; } .lmsm-numrange-track { position: relative; width: 100%; height: 6px; } .lmsm-numrange-bg { position: absolute; inset: 0; background: var(--lmsm-border); border-radius: 3px; } .lmsm-numrange-fill { position: absolute; top: 0; height: 6px; background: var(--lmsm-primary); border-radius: 3px; } .lmsm-numrange-track input[type=range] { position: absolute; top: -5px; width: 100%; height: 16px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; } .lmsm-numrange-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lmsm-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: all; } .lmsm-numrange-track input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lmsm-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; pointer-events: all; } /* ───────── Responsive ───────── */ @media (max-width: 900px) { .lmsm-hero-row { grid-template-columns: 1fr 1fr; } .lmsm-hero-row>.lmsm-input-search { grid-column: 1 / -1; } .lmsm-hero-row>.lmsm-btn { grid-column: span 1; min-width: 0; } .lmsm-shell.lmsm-map-open .lmsm-main { grid-template-columns: 1fr; } .lmsm-shell.lmsm-map-open .lmsm-results { display: none; } } /* Drop the fixed-viewport / inner-scroll model so the iframe DOCUMENT flows and the outer page becomes the scroll container — users can scroll from anywhere. iOS Safari cannot touch-scroll a fixed-height iframe, so the old inner-scroll model left lower results (and their View button) unreachable on phones. This regime MUST match the FullScreen tag's lock guard in lib.cfm (it locks the page only when width > 700 AND height >= 580) and the iframe-growth script in search_embed_modern.cfm, so all three agree on when the page — not the iframe — scrolls. A narrow OR short viewport (portrait or landscape phone, small tablet) uses the flow model. */ @media (max-width: 700px), (max-height: 579px) { /* height:auto lets the shell size to its content so the iframe can be grown to exactly that height. Do NOT add min-height:100vh here: inside the iframe 100vh equals the iframe's own height, so it would feed back into the height-growth script (search_embed_modern.cfm) and the iframe would grow without bound, leaving a long empty scroll area below the content. */ .lmsm-shell { height: auto; } /* Hero scrolls with the content (not sticky) so it doesn't eat the small viewport once you start browsing cards. */ .lmsm-hero { position: static; } .lmsm-main { overflow: visible; min-height: 0; } .lmsm-results { overflow: visible; } } @media (max-width: 600px) { .lmsm-hero { padding: 12px 12px 0; } /* Stack Filters + Search buttons full-width so the Search button can't get clipped */ .lmsm-hero-row>.lmsm-btn { grid-column: 1 / -1; } /* Let inputs shrink below their natural min-content so they can't push the grid past the viewport */ .lmsm-hero-row>.lmsm-input { min-width: 0; } .lmsm-results { padding: 16px 12px 40px; } .lmsm-grid { grid-template-columns: 1fr; } .lmsm-toolbar { gap: 10px; } .lmsm-toggle-btn { padding: 0 12px; font-size: 12px; } }