Awards HTML, CSS, JS for Sidearm Sites: Complete Integration Guide for College Athletics

<section class="awards-section" id="team-awards">
<div class="container">
<header class="awards-header">
<h2>Conference Championships</h2>
<p class="awards-subtitle">Women's Basketball Excellence</p>
</header>

<div class="awards-grid">
<article class="award-card" data-year="2024" data-sport="basketball">
<div class="award-image">
<img src="championship-2024.jpg" alt="2024 Conference Championship Team Photo" loading="lazy">
</div>
<div class="award-content">
<h3 class="award-title">Conference Regular Season Champions</h3>
<p class="award-date">2023-24 Season</p>
<p class="award-description">Perfect 16-0 conference record, first undefeated season since 2010</p>
<ul class="award-highlights">
<li>25-3 overall record</li>
<li>NCAA Tournament Sweet Sixteen appearance</li>
<li>Three All-Conference selections</li>
</ul>
</div>
</article>

<!-- Additional award cards follow same structure -->
</div>
</div>
</section>

<section class="record-board" id="track-records">
<header class="record-board-header">
<h2>Women's Track & Field Records</h2>
<div class="record-filters">
<button class="filter-btn active" data-category="all">All Events</button>
<button class="filter-btn" data-category="sprints">Sprints</button>
<button class="filter-btn" data-category="distance">Distance</button>
<button class="filter-btn" data-category="field">Field Events</button>
</div>
</header>

<div class="table-responsive">
<table class="records-table">
<thead>
<tr>
<th>Event</th>
<th>Record</th>
<th>Athlete</th>
<th>Date</th>
<th>Meet</th>
</tr>
</thead>
<tbody>
<tr data-category="sprints">
<td data-label="Event">100m</td>
<td data-label="Record" class="record-time">11.24</td>
<td data-label="Athlete">
<a href="/athlete-profile/jane-smith">Jane Smith</a>
</td>
<td data-label="Date">April 15, 2024</td>
<td data-label="Meet">Conference Championships</td>
</tr>
<!-- Additional records follow -->
</tbody>
</table>
</div>
</section>

<section class="award-gallery" id="hall-of-fame">
<div class="container">
<h2>Athletic Hall of Fame Inductees</h2>
<div class="gallery-grid">
<div class="inductee-card">
<div class="inductee-image">
<img src="inductee-photo.jpg" alt="Michael Johnson Hall of Fame Portrait">
<div class="inductee-overlay">
<button class="view-details" data-inductee="michael-johnson">
View Profile
</button>
</div>
</div>
<div class="inductee-info">
<h3>Michael Johnson</h3>
<p class="inductee-sport">Football • 1995-98</p>
<p class="inductee-year">Inducted 2010</p>
</div>
</div>
<!-- Additional inductee cards -->
</div>
</div>

<!-- Modal for detailed profiles -->
<div class="modal" id="inductee-modal" role="dialog" aria-hidden="true">
<div class="modal-content">
<button class="modal-close" aria-label="Close modal">&times;</button>
<div class="modal-body">
<!-- Dynamically populated with JavaScript -->
</div>
</div>
</div>
</section>

/* Awards grid using CSS Grid */
.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem 0;
}

/* Award card styling */
.award-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.award-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
.awards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1rem 0;
}
}

/* Typography system matching institutional brand */
.awards-section h2 {
font-family: 'Montserrat', sans-serif; /* Use institution's heading font */
font-size: 2.5rem;
font-weight: 700;
color: #003366; /* Primary institutional color */
margin-bottom: 0.5rem;
}

.awards-subtitle {
font-family: 'Open Sans', sans-serif; /* Body font */
font-size: 1.125rem;
color: #666666;
margin-bottom: 2rem;
}

.award-title {
font-size: 1.25rem;
font-weight: 600;
color: #003366;
margin-bottom: 0.5rem;
}

/* Accent colors for highlights and interactive elements */
.award-card:hover .award-title {
color: #FFB81C; /* Secondary/accent color */
}

.filter-btn.active {
background-color: #003366;
color: #ffffff;
border-color: #003366;
}

/* Smooth transitions for interactive elements */
.award-card,
.filter-btn,
.inductee-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover states that provide clear feedback */
.filter-btn:hover {
background-color: #f0f0f0;
cursor: pointer;
}

/* Loading states for dynamic content */
.awards-grid.loading {
opacity: 0.6;
pointer-events: none;
}

.awards-grid.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #003366;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Desktop table styling */
.records-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
}

.records-table thead {
background-color: #003366;
color: #ffffff;
}

.records-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
}

.records-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #e0e0e0;
}

.records-table tbody tr:hover {
background-color: #f5f5f5;
}

/* Mobile transformation */
@media (max-width: 768px) {
.records-table thead {
display: none; /* Hide header row */
}

.records-table tbody tr {
display: block;
margin-bottom: 1.5rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}

.records-table td {
display: flex;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid #f0f0f0;
}

.records-table td:last-child {
border-bottom: none;
}

/* Show labels on mobile */
.records-table td::before {
content: attr(data-label);
font-weight: 600;
color: #003366;
}
}

// Award filtering functionality
class AwardFilter {
constructor(containerSelector) {
this.container = document.querySelector(containerSelector);
this.filterButtons = document.querySelectorAll('.filter-btn');
this.awardCards = document.querySelectorAll('.award-card');

this.init();
}

init() {
this.filterButtons.forEach(button => {
button.addEventListener('click', (e) => this.filterAwards(e));
});
}

filterAwards(event) {
const category = event.target.dataset.category;

// Update active button state
this.filterButtons.forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');

// Filter awards with animation
this.awardCards.forEach(card => {
const cardCategory = card.dataset.sport;

if (category === 'all' || cardCategory === category) {
card.style.display = 'block';
setTimeout(() => card.classList.add('fade-in'), 10);
} else {
card.classList.remove('fade-in');
setTimeout(() => card.style.display = 'none', 300);
}
});
}
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
new AwardFilter('.awards-grid');
});

// Award search implementation
class AwardSearch {
constructor(searchInputSelector, resultsSelector) {
this.searchInput = document.querySelector(searchInputSelector);
this.results = document.querySelectorAll(resultsSelector);
this.searchIndex = this.buildSearchIndex();

this.init();
}

buildSearchIndex() {
// Create searchable index of all awards
return Array.from(this.results).map(result => ({
element: result,
searchText: result.textContent.toLowerCase(),
athlete: result.dataset.athlete?.toLowerCase() || '',
sport: result.dataset.sport?.toLowerCase() || '',
year: result.dataset.year || ''
}));
}

init() {
this.searchInput.addEventListener('input', (e) => {
this.performSearch(e.target.value);
});
}

performSearch(query) {
const normalizedQuery = query.toLowerCase().trim();

if (normalizedQuery.length < 2) {
// Show all results for short queries
this.results.forEach(result => result.style.display = '');
return;
}

let matchCount = 0;
this.searchIndex.forEach(item => {
const matches = item.searchText.includes(normalizedQuery) ||
item.athlete.includes(normalizedQuery) ||
item.sport.includes(normalizedQuery) ||
item.year.includes(normalizedQuery);

item.element.style.display = matches ? '' : 'none';
if (matches) matchCount++;
});

// Update results count
this.updateResultsCount(matchCount, normalizedQuery);
}

updateResultsCount(count, query) {
const counter = document.querySelector('.search-results-count');
if (counter) {
counter.textContent = `${count} result${count !== 1 ? 's' : ''} for "${query}"`;
}
}
}

// Initialize search
document.addEventListener('DOMContentLoaded', () => {
new AwardSearch('#award-search', '.award-card, .record-row');
});

// Lazy loading implementation for awards content
class AwardLoader {
constructor() {
this.loadMoreBtn = document.querySelector('.load-more-awards');
this.container = document.querySelector('.awards-grid');
this.currentPage = 1;
this.perPage = 12;

this.init();
}

init() {
if (this.loadMoreBtn) {
this.loadMoreBtn.addEventListener('click', () => this.loadMore());
}

// Implement infinite scroll option
this.setupInfiniteScroll();
}

async loadMore() {
this.loadMoreBtn.disabled = true;
this.loadMoreBtn.textContent = 'Loading...';

try {
// Fetch next page of awards from your data source
const awards = await this.fetchAwards(this.currentPage + 1);

if (awards.length > 0) {
this.renderAwards(awards);
this.currentPage++;
} else {
this.loadMoreBtn.style.display = 'none';
}
} catch (error) {
console.error('Error loading awards:', error);
alert('Unable to load additional awards. Please try again.');
} finally {
this.loadMoreBtn.disabled = false;
this.loadMoreBtn.textContent = 'Load More Awards';
}
}

async fetchAwards(page) {
// Replace with actual data source - could be API endpoint,
// JSON file, or content from Sidearm's backend
const response = await fetch(`/api/awards?page=${page}&per_page=${this.perPage}`);
return await response.json();
}

renderAwards(awards) {
const fragment = document.createDocumentFragment();

awards.forEach(award => {
const card = this.createAwardCard(award);
fragment.appendChild(card);
});

this.container.appendChild(fragment);
}

createAwardCard(award) {
const card = document.createElement('article');
card.className = 'award-card';
card.dataset.year = award.year;
card.dataset.sport = award.sport;

card.innerHTML = `
<div class="award-image">
<img src="${award.image}" alt="${award.title}" loading="lazy">
</div>
<div class="award-content">
<h3 class="award-title">${award.title}</h3>
<p class="award-date">${award.date}</p>
<p class="award-description">${award.description}</p>
</div>
`;

return card;
}

setupInfiniteScroll() {
// Optional: automatically load content as user scrolls
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !this.loadMoreBtn.disabled) {
this.loadMore();
}
});
}, { threshold: 0.1 });

if (this.loadMoreBtn) {
observer.observe(this.loadMoreBtn);
}
}
}

// Initialize loader
document.addEventListener('DOMContentLoaded', () => {
new AwardLoader();
});

// Modal functionality for detailed award/athlete profiles
class ProfileModal {
constructor() {
this.modal = document.querySelector('#inductee-modal');
this.modalBody = this.modal?.querySelector('.modal-body');
this.closeBtn = this.modal?.querySelector('.modal-close');

this.init();
}

init() {
// Open modal when any view details button is clicked
document.addEventListener('click', (e) => {
if (e.target.closest('.view-details')) {
const inducteeId = e.target.closest('.view-details').dataset.inductee;
this.openModal(inducteeId);
}
});

// Close modal handlers
this.closeBtn?.addEventListener('click', () => this.closeModal());
this.modal?.addEventListener('click', (e) => {
if (e.target === this.modal) this.closeModal();
});

// Close on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.modal.classList.contains('open')) {
this.closeModal();
}
});
}

async openModal(inducteeId) {
// Show loading state
this.modalBody.innerHTML = '<div class="loading-spinner">Loading...</div>';
this.modal.classList.add('open');
this.modal.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden'; // Prevent background scrolling

try {
// Fetch detailed profile data
const profile = await this.fetchProfile(inducteeId);
this.renderProfile(profile);
} catch (error) {
this.modalBody.innerHTML = '<p class="error">Unable to load profile. Please try again.</p>';
}
}

closeModal() {
this.modal.classList.remove('open');
this.modal.setAttribute('aria-hidden', 'true');
document.body.style.overflow = ''; // Restore scrolling
}

async fetchProfile(inducteeId) {
// Fetch from data source - API, JSON file, or embedded data
const response = await fetch(`/api/inductees/${inducteeId}`);
return await response.json();
}

renderProfile(profile) {
this.modalBody.innerHTML = `
<div class="profile-header">
<img src="${profile.image}" alt="${profile.name}" class="profile-image">
<div class="profile-title">
<h2>${profile.name}</h2>
<p class="profile-sport">${profile.sport} • ${profile.years}</p>
<p class="profile-induction">Inducted ${profile.inductionYear}</p>
</div>
</div>
<div class="profile-content">
<div class="profile-bio">
<h3>Biography</h3>
<p>${profile.bio}</p>
</div>
<div class="profile-achievements">
<h3>Career Highlights</h3>
<ul>
${profile.achievements.map(a => `<li>${a}</li>`).join('')}
</ul>
</div>
${profile.stats ? `
<div class="profile-stats">
<h3>Career Statistics</h3>
<dl>
${Object.entries(profile.stats).map(([key, value]) =>
`<dt>${key}</dt><dd>${value}</dd>`
).join('')}
</dl>
</div>
` : ''}
</div>
`;
}
}

// Initialize modal system
document.addEventListener('DOMContentLoaded', () => {
new ProfileModal();
});

/* Mobile-first base styles */
.awards-section {
padding: 1rem;
}

.award-card {
margin-bottom: 1.5rem;
}

.award-image img {
width: 100%;
height: auto;
}

/* Tablet enhancements */
@media (min-width: 768px) {
.awards-section {
padding: 2rem;
}

.awards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}

/* Desktop optimizations */
@media (min-width: 1024px) {
.awards-section {
padding: 3rem;
}

.awards-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
}

/* Large desktop refinements */
@media (min-width: 1400px) {
.awards-grid {
grid-template-columns: repeat(4, 1fr);
}
}

/* Touch-friendly button sizing */
.filter-btn,
.view-details {
min-height: 44px; /* Apple's recommended minimum touch target */
min-width: 44px;
padding: 0.75rem 1.5rem;
}

/* Increased spacing for touch interfaces */
@media (pointer: coarse) {
.awards-grid {
gap: 2rem;
}

.filter-buttons {
gap: 1rem;
}

/* Replace hover effects with tap states */
.award-card {
-webkit-tap-highlight-color: rgba(0, 51, 102, 0.1);
}

.award-card:active {
transform: scale(0.98);
}
}

<!-- Responsive images using srcset -->
<img
src="award-small.jpg"
srcset="award-small.jpg 400w,
award-medium.jpg 800w,
award-large.jpg 1200w"
sizes="(max-width: 768px) 100vw,
(max-width: 1024px) 50vw,
33vw"
alt="Championship trophy presentation"
loading="lazy">

<!-- WebP with fallback -->
<picture>
<source srcset="award.webp" type="image/webp">
<source srcset="award.jpg" type="image/jpeg">
<img src="award.jpg" alt="Championship trophy presentation">
</picture>

// Conditional feature loading based on screen size
if (window.innerWidth >= 1024) {
// Load desktop-only enhancements
import('./desktop-features.js').then(module => {
module.initDesktopFeatures();
});
}

// Intersection Observer for lazy feature initialization
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Initialize expensive features only when section becomes visible
initializeAwardAnimations(entry.target);
observer.unobserve(entry.target);
}
});
});

document.querySelectorAll('.awards-section').forEach(section => {
observer.observe(section);
});

<!-- Embedded recognition display -->
<div class="external-recognition-embed">
<iframe
src="https://recognition-platform.com/embed/university-name/awards"
width="100%"
height="800"
frameborder="0"
style="border: none; max-width: 100%;"
title="Interactive Awards Recognition Display"
loading="lazy">
</iframe>
</div>

<!-- Fallback content for accessibility -->
<div class="embed-fallback">
<p>View our <a href="https://recognition-platform.com/university-name">complete awards archive</a>.</p>
</div>

// Fetching awards data from external platform
class ExternalAwardsIntegration {
constructor(apiEndpoint, apiKey) {
this.apiEndpoint = apiEndpoint;
this.apiKey = apiKey;
this.cache = new Map();
this.cacheExpiry = 5 * 60 * 1000; // 5 minutes
}

async fetchAwards(filters = {}) {
const cacheKey = JSON.stringify(filters);

// Check cache first
if (this.cache.has(cacheKey)) {
const cached = this.cache.get(cacheKey);
if (Date.now() - cached.timestamp < this.cacheExpiry) {
return cached.data;
}
}

try {
const params = new URLSearchParams(filters);
const response = await fetch(
`${this.apiEndpoint}/awards?${params}`,
{
headers: {
'Authorization': `Bearer ${this.apiKey}`,
'Content-Type': 'application/json'
}
}
);

if (!response.ok) throw new Error('API request failed');

const data = await response.json();

// Cache successful response
this.cache.set(cacheKey, {
data: data,
timestamp: Date.now()
});

return data;
} catch (error) {
console.error('Error fetching awards:', error);
return [];
}
}

async renderToContainer(containerId, filters = {}) {
const container = document.getElementById(containerId);
if (!container) return;

// Show loading state
container.innerHTML = '<div class="loading">Loading awards...</div>';

const awards = await this.fetchAwards(filters);

if (awards.length === 0) {
container.innerHTML = '<p>No awards found matching your criteria.</p>';
return;
}

// Render awards using native site styling
container.innerHTML = awards.map(award => `
<article class="award-card">
<div class="award-content">
<h3>${award.title}</h3>
<p class="award-athlete">${award.athlete}</p>
<p class="award-date">${award.date}</p>
<p>${award.description}</p>
</div>
</article>
`).join('');
}
}

// Initialize integration
const awardsAPI = new ExternalAwardsIntegration(
'https://api.recognition-platform.com',
'your-api-key-here'
);

// Render awards on page
awardsAPI.renderToContainer('awards-container', {
sport: 'basketball',
year: 2024
});

<div class="physical-display-link">
<h3>Visit Our Interactive Hall of Fame</h3>
<p>Experience our complete awards archive on the digital display in the Athletics Center lobby.</p>
<div class="qr-code-container">
<img src="qr-code-hall-of-fame.png" alt="QR code linking to mobile awards experience">
<p class="qr-instructions">Scan to access on your mobile device</p>
</div>
</div>

<!-- Inline critical CSS for above-the-fold content -->
<style>
.awards-header {
/* Critical styles that prevent layout shift */
}
</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="awards-full.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="awards-full.css"></noscript>

<!-- Async JavaScript loading -->
<script src="awards.js" async></script>

// Debounce expensive operations like search
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}

// Use debounced search
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value));

// Request Animation Frame for smooth animations
function animateAwards() {
awards.forEach((award, index) => {
requestAnimationFrame(() => {
setTimeout(() => {
award.classList.add('fade-in');
}, index * 50); // Stagger animations
});
});
}

<!-- Proper heading hierarchy -->
<section aria-labelledby="awards-heading">
<h2 id="awards-heading">Athletic Awards and Honors</h2>

<!-- Skip link for keyboard users -->
<a href="#main-awards" class="skip-link">Skip to awards content</a>

<!-- Descriptive labels for interactive elements -->
<button
aria-label="Filter awards by basketball"
aria-pressed="false"
data-category="basketball">
Basketball
</button>

<!-- Status announcements for dynamic content -->
<div role="status" aria-live="polite" class="sr-only">
<span id="filter-status"></span>
</div>
</section>

// Ensure all interactive elements work with keyboard
class KeyboardAccessible {
constructor(selector) {
this.elements = document.querySelectorAll(selector);
this.init();
}

init() {
this.elements.forEach(element => {
// Make custom elements focusable
if (!element.hasAttribute('tabindex')) {
element.setAttribute('tabindex', '0');
}

// Add keyboard event handlers
element.addEventListener('keydown', (e) => {
// Activate on Enter or Space
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
element.click();
}
});
});
}
}

// Make award cards keyboard-accessible
new KeyboardAccessible('.award-card');

/* Ensure sufficient color contrast (WCAG AA: 4.5:1 for normal text) */
.award-title {
color: #003366; /* Passes contrast on white background */
}

/* Focus indicators for keyboard navigation */
.award-card:focus,
.filter-btn:focus {
outline: 3px solid #FFB81C;
outline-offset: 2px;
}

/* Don't rely solely on color to convey information */
.record-holder {
color: #028A0F;
font-weight: bold; /* Also use weight, not just color */
}

.record-holder::before {
content: '⭐ '; /* Add icon indicator */
}

<!-- Descriptive alt text for images -->
<img
src="championship-team.jpg"
alt="2024 Women's Soccer team celebrating Conference Championship with trophy, confetti falling"
>

<!-- Hide decorative images from screen readers -->
<img src="decorative-pattern.svg" alt="" role="presentation">

<!-- Provide text alternatives for data visualizations -->
<div class="chart" aria-describedby="chart-description">
<!-- Visual chart -->
</div>
<div id="chart-description" class="sr-only">
Conference championships by decade: 1990s: 3 titles, 2000s: 5 titles, 2010s: 7 titles, 2020s: 4 titles
</div>

// Check for existing jQuery before loading
if (typeof jQuery === 'undefined') {
// Load your jQuery version
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);
} else {
// Use existing jQuery in noConflict mode if versions differ
const $j = jQuery.noConflict();
// Use $j instead of $ in your code
}

// Alternatively, avoid jQuery entirely and use vanilla JavaScript
// Modern JavaScript eliminates most jQuery use cases

/* Option 1: Increase specificity with more specific selectors */
.custom-awards-section .awards-grid .award-card {
/* More specific than Sidearm's generic styles */
}

/* Option 2: Use :where() to reset specificity of framework styles */
:where(.some-framework-class) .award-card {
/* Your styles with normal specificity */
}

/* Option 3: Strategic !important use (use sparingly) */
.award-card {
background-color: #ffffff !important;
}

/* Option 4: CSS layers (modern approach) */
@layer framework, custom;

@layer custom {
.award-card {
/* Your styles automatically win over framework layer */
}
}

// Store awards data in easily-editable JSON
const awardsData = [
{
id: 1,
title: "Conference Player of the Year",
athlete: "Sarah Johnson",
sport: "basketball",
year: "2024",
image: "sarah-johnson.jpg",
description: "Led conference in scoring and assists"
},
// Additional awards...
];

// Render from data
function renderAwards(data) {
const container = document.getElementById('awards-container');
container.innerHTML = data.map(award => createAwardHTML(award)).join('');
}

// Initialize
renderAwards(awardsData);

// Implement progressive loading
class ProgressiveAwardLoader {
constructor() {
this.loadedCount = 0;
this.batchSize = 6;
this.allAwards = document.querySelectorAll('.award-card');

this.init();
}

init() {
// Hide all awards initially
this.allAwards.forEach(award => award.style.display = 'none');

// Load first batch immediately
this.loadBatch();

// Load more as user scrolls
this.setupIntersectionObserver();
}

loadBatch() {
const start = this.loadedCount;
const end = Math.min(start + this.batchSize, this.allAwards.length);

for (let i = start; i < end; i++) {
this.allAwards[i].style.display = '';
}

this.loadedCount = end;
}

setupIntersectionObserver() {
// Load more when user approaches end of loaded content
const sentinel = document.createElement('div');
sentinel.className = 'load-sentinel';
document.querySelector('.awards-grid').appendChild(sentinel);

const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && this.loadedCount < this.allAwards.length) {
this.loadBatch();
}
});

observer.observe(sentinel);
}
}

// Extract theme variables from Sidearm site
const computedStyle = getComputedStyle(document.documentElement);

const themeColors = {
primary: computedStyle.getPropertyValue('--primary-color').trim() || '#003366',
secondary: computedStyle.getPropertyValue('--secondary-color').trim() || '#FFB81C',
text: computedStyle.getPropertyValue('--text-color').trim() || '#333333'
};

// Apply to custom elements
document.querySelectorAll('.award-title').forEach(title => {
title.style.color = themeColors.primary;
});

document.querySelectorAll('.award-highlight').forEach(highlight => {
highlight.style.borderColor = themeColors.secondary;
});

/* Or use CSS custom properties from Sidearm theme */
.award-card {
background: var(--card-background, #ffffff);
border: 1px solid var(--border-color, #e0e0e0);
}

.award-title {
color: var(--heading-color, #003366);
font-family: var(--heading-font, 'Montserrat', sans-serif);
}

/* Feature queries provide fallbacks */
.awards-grid {
/* Fallback for older browsers */
display: flex;
flex-wrap: wrap;
}

/* Modern browsers get Grid */
@supports (display: grid) {
.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}

// Feature detection for JavaScript
if ('IntersectionObserver' in window) {
// Use modern Intersection Observer
setupIntersectionObserver();
} else {
// Fallback to scroll event listener
window.addEventListener('scroll', throttledScrollHandler);
}