/* Stallion Roster Cards */ .stallion-card { max-width: 100%; overflow: hidden; } .stallion-card .image-wrapper { min-height: 220px; overflow: hidden; } .stallion-card .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); /* light transparent wash */ opacity: 0; transition: opacity 0.3s ease; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .stallion-card:hover .overlay { opacity: 1; } .stallion-card img { max-width: 100%; height: auto; object-fit: cover; display: block; } .arionStallionContactPanel { } .arionStallionDetailsPanel { background-color: var(--slate-50); border-radius: 0.5rem; } .arionStallionImage { width: 100%; border-radius: 0.5rem; } @media (max-width: 1500px) { .stallion-card .image-wrapper { min-height: 120px; } } @media (max-width: 576px) { .stallion-card .image-wrapper { min-height: 120px; } } /* Scoped to .stallions-tabset only */ .stallions-tabset .nav-pills .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; background-color: transparent; color: var(--text-muted-alt); font-family: var(--font-body); font-weight: 600; padding: 0.75rem 1rem; transition: color 0.15s ease, border-color 0.15s ease; } /* Hover effect */ .stallions-tabset .nav-pills .nav-link:hover { color: var(--text-color); border-bottom-color: #b8b6b0; } /* Active tab styling */ .stallions-tabset .nav-pills .nav-link.active { color: var(--text-color); border-bottom-color: #52514e; background-color: transparent; } /* Optional: spacing between tabs */ .stallions-tabset .nav-pills .nav-item { margin: 0 0.25rem; } /* Responsive tweaks */ @media (max-width: 768px) { .stallions-tabset .nav-pills .nav-link { font-size: 0.9rem; padding: 0.5rem 0.75rem; } } /* ============================================================ Stallion Detail Modal — shell sizing ───────────────────────────────────── Blazorise renders modals in a portal appended to , outside any component's scoped CSS tree. These rules MUST live in the global stylesheet to reach the shell elements. .sdm-modal is passed as the Class in ModalInstanceOptions in StallionRoster.razor.cs — Blazorise places it on the outermost .modal div. This scopes all rules to ONLY our stallion modal; no bleed to flyouts or other modals. ============================================================ */ /* 1. Viewport-fill dialog with equal top/bottom margin */ .sdm-modal .modal-dialog { margin-top: 2rem; margin-bottom: 2rem; height: calc(100dvh - 4rem); max-height: calc(100dvh - 4rem); display: flex; flex-direction: column; } /* 2. modal-content fills the dialog */ .sdm-modal .modal-content { flex: 1 1 auto; display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden; } /* 3. modal-body fills remaining space, no scroll here */ .sdm-modal .modal-body { flex: 1 1 auto; overflow: hidden; max-height: none; padding: 0; display: flex; flex-direction: column; } /* Alternative anchor: .sdm-body is unique to the stallion modal. We use it to walk up to .modal-dialog via the known Blazorise DOM structure: .modal > .modal-dialog > .modal-content > .modal-body.sdm-body The :has() selector lets us target the ancestor .modal-dialog. */ .modal-dialog:has(.sdm-body) { margin-top: 2rem; margin-bottom: 2rem; height: calc(100dvh - 4rem); max-height: calc(100dvh - 4rem); width: min(1180px, calc(100vw - 48px)); max-width: 1180px; display: flex; flex-direction: column; } .modal-dialog:has(.sdm-body) .modal-content { flex: 1 1 auto; display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden; border: 0; border-radius: var(--radius-lg); } .modal-dialog:has(.sdm-body) .modal-body { flex: 1 1 auto; overflow: hidden; max-height: none; padding: 0; display: flex; flex-direction: column; } @media (max-width: 767.98px) { .modal-dialog:has(.sdm-body) { width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); margin: 10px; } }