/** * NewWave Downloads - Frontend Styles * BEM methodology with Bootstrap 5 compatibility */ /* ── View wrapper — content spacing ─────────────────────────────────────── */ .nwd-view { --nwdownloads-top-space: 2rem; --nwdownloads-bottom-space: 3rem; --nwdownloads-hero-gap: 2rem; --nwdownloads-hero-height: 45vh; padding-top: var(--nwdownloads-top-space); padding-bottom: var(--nwdownloads-bottom-space); } /* When JS portals the hero to , this class removes the top padding */ .nwd-view.nwd-has-fullwidth-hero { padding-top: 0; } /* ── System messages on NWDownloads pages ────────────────────────────── */ /* JS sets paddingTop dynamically; these rules handle static layout only. */ body:has(.nwd-view) #system-message-container, body:has(.nwd-view) #sp-message, body:has(.nwd-view) .system-message-container { margin-bottom: 1.5rem; } body:has(.nwd-view) #system-message-container:empty, body:has(.nwd-view) #sp-message:empty, body:has(.nwd-view) .system-message-container:empty { margin-bottom: 0; } body:has(.nwd-view) #system-message-container .alert, body:has(.nwd-view) #sp-message .alert, body:has(.nwd-view) .system-message-container .alert { border-radius: var(--bs-border-radius, 0.375rem); margin-bottom: 0.75rem; } body:has(.nwd-view) #system-message-container .alert:last-child, body:has(.nwd-view) #sp-message .alert:last-child, body:has(.nwd-view) .system-message-container .alert:last-child { margin-bottom: 0; } /* ── Hero image — contained (default) ───────────────────────────────── */ .nwd-hero { margin-bottom: var(--nwdownloads-hero-gap); border-radius: var(--bs-border-radius, 0.375rem); overflow: hidden; line-height: 0; } .nwd-hero img { width: 100%; height: auto; display: block; } /* ── Hero image — full-width variant ────────────────────────────────── */ /* JS moves .nwd-hero--fullwidth to and inserts .nwd-hero-spacer */ /* in its original position, then sets top/height via getBoundingClientRect. */ /* This bypasses overflow:hidden ancestors (e.g. SP Page Builder columns). */ /* Spacer holds vertical space where the hero originally lived */ .nwd-hero-spacer { height: var(--nwdownloads-hero-height, 45vh); margin-bottom: var(--nwdownloads-hero-gap, 2rem); display: block; } /* Hero portaled to ; top + height set by JS. CSS height prevents giant-image flash before JS fires. */ .nwd-hero--fullwidth { position: absolute; left: 0; width: 100vw; height: var(--nwdownloads-hero-height, 45vh); margin: 0; border-radius: 0; overflow: hidden; line-height: 0; z-index: 0; } .nwd-hero--fullwidth img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ── Categories ─────────────────────────────────────────────────────── */ /* Categories */ .nwd-categories { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .nwd-categories--cols-2 { grid-template-columns: repeat(2, 1fr); } .nwd-categories--cols-3 { grid-template-columns: repeat(3, 1fr); } .nwd-categories--cols-4 { grid-template-columns: repeat(4, 1fr); } .nwd-category { padding: 1.5rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, 0.375rem); transition: border-color 0.2s ease; } .nwd-category:hover { border-color: var(--bs-primary, #0d6efd); } .nwd-category__title { margin-bottom: 0.5rem; } .nwd-category__title a { text-decoration: none; color: inherit; } .nwd-category__title a:hover { color: var(--bs-primary, #0d6efd); } .nwd-category__description { color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; margin-bottom: 0.5rem; } .nwd-category__count { font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } /* Files grid */ .nwd-files { display: grid; gap: 1.5rem; margin-bottom: 2rem; } .nwd-files--cols-2 { grid-template-columns: repeat(2, 1fr); } .nwd-files--cols-3 { grid-template-columns: repeat(3, 1fr); } .nwd-files--cols-4 { grid-template-columns: repeat(4, 1fr); } /* File card */ .nwd-file { padding: 1.5rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--bs-border-radius, 0.375rem); display: flex; flex-direction: column; } .nwd-file__title { margin-bottom: 0.5rem; font-size: 1.125rem; } .nwd-file__title a { text-decoration: none; color: inherit; } .nwd-file__title a:hover { color: var(--bs-primary, #0d6efd); } .nwd-file__brief { color: var(--bs-secondary-color, #6c757d); font-size: 0.875rem; margin-bottom: 1rem; flex-grow: 1; } .nwd-file__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--bs-secondary-color, #6c757d); } .nwd-file__meta-item { display: inline-flex; align-items: center; gap: 0.25rem; } .nwd-file__actions { margin-top: auto; } .nwd-file__download-btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* File detail */ .nwd-detail__description { margin-bottom: 2rem; line-height: 1.7; } .nwd-detail__meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background: var(--bs-tertiary-bg, #f8f9fa); border-radius: var(--bs-border-radius, 0.375rem); } /* Filter bar */ .nwd-filter { margin-bottom: 2rem; padding: 1rem; background: var(--bs-tertiary-bg, #f8f9fa); border-radius: var(--bs-border-radius, 0.375rem); } .nwd-filter__form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; } .nwd-filter__field { flex: 1 1 200px; } /* Download modal */ .nwd-download-modal__form { padding: 1rem 0; } /* Pagination */ .nwd-pagination { margin-top: 2rem; } /* Responsive */ @media (max-width: 768px) { .nwd-categories--cols-2, .nwd-categories--cols-3, .nwd-categories--cols-4, .nwd-files--cols-2, .nwd-files--cols-3, .nwd-files--cols-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 991px) { .nwd-categories--cols-3, .nwd-categories--cols-4, .nwd-files--cols-3, .nwd-files--cols-4 { grid-template-columns: repeat(2, 1fr); } }