landing/src/lib/components/ExperienceSection.svelte

<script lang="ts">
    import { experienceLogos, experienceTextList } from '$lib/data/experience';
</script>

<section
    id="experience"
    class="section experience-section"
    aria-labelledby="experience-heading"
>
    <div class="container">
        <h2 id="experience-heading" class="section-title">
            Experience includes teams at:
        </h2>

        <div class="logo-strip" role="list" aria-label="Company logos">
            {#each experienceLogos as logo (logo.alt)}
                <div class="logo-item" role="listitem">
                    <img
                        src={logo.src}
                        alt={logo.alt}
                        loading="lazy"
                        width={logo.width}
                        height={logo.height}
                    />
                    <span class="logo-fallback-text">{logo.alt}</span>
                </div>
            {/each}
        </div>

        <ul class="logo-text-list" aria-hidden="true">
            {#each experienceTextList as name (name)}
                <li>{name}</li>
            {/each}
        </ul>

        <p class="footnote">Logos are trademarks of their respective owners.</p>
    </div>
</section>

<style>
    .experience-section {
        text-align: center;
        background-color: var(--color-bg);
    }

    .logo-strip {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xl);
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: var(--space-lg) 0;

        @media (max-width: 480px) {
            display: none;
        }

        @media (max-width: 768px) and (min-width: 481px) {
            gap: var(--space-lg);
            padding: var(--space-md) 0;
        }

        @media (max-width: 768px) {
            gap: var(--space-md);
        }

        @media print {
            display: none;
        }
    }

    .logo-item {
        position: relative;
        flex: 0 1 auto;
        min-width: 120px;
        max-width: 160px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-xs);

        /* Make logo containers keyboard focusable for screen reader users */
        &:focus-within {
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
            border-radius: var(--border-radius);
        }

        @media (max-width: 768px) and (min-width: 481px) {
            min-width: 110px;
            max-width: 140px;
        }

        @media (max-width: 768px) {
            max-width: 120px;
        }

        @media (max-width: 480px) {
            max-width: 100px;
        }

        & img {
            width: 100%;
            height: auto;
            max-height: 50px;
            object-fit: contain;
            opacity: 0.75;
            transition: all var(--transition-base);
            filter: grayscale(100%) contrast(1.15);

            &:hover,
            &:focus,
            &:focus-visible {
                opacity: 1;
                filter: grayscale(25%) contrast(1.05);
                transform: scale(1.05);
            }

            &:focus-visible {
                outline: 4px solid var(--color-focus);
                outline-offset: 4px;
                border-radius: var(--border-radius);
            }

            &[alt]:not([src]),
            &[alt][src=''],
            &[alt]:not([src*='.svg']):not([src*='.png']):not([src*='.jpg']) {
                display: none;
            }

            @media (max-width: 768px) and (min-width: 481px) {
                max-height: 45px;
            }

            @media (prefers-reduced-motion: reduce) {
                &:hover,
                &:focus {
                    transform: none;
                }
            }

            /* Dark mode logo adaptations */
            @media (prefers-color-scheme: dark) {
                filter: grayscale(100%) brightness(0) invert(1) contrast(1.25);
                opacity: 0.65;

                &:hover,
                &:focus,
                &:focus-visible {
                    filter: grayscale(50%) brightness(1) invert(1) contrast(1.1);
                    opacity: 0.9;
                }
            }

            @media (prefers-contrast: high) {
                opacity: 1;
                filter: contrast(1.6);

                @media (prefers-color-scheme: dark) {
                    filter: brightness(0) invert(1) contrast(1.9);
                    opacity: 1;
                }
            }

            @media print {
                opacity: 1;
                filter: none;
                max-height: 40px;
            }
        }
    }

    /* Fallback text (shown when image fails to load or on very small screens) */
    .logo-fallback-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .logo-item:has(img[alt]:not([src])) .logo-fallback-text,
    .logo-item:has(img[alt][src='']) .logo-fallback-text {
        position: static;
        width: auto;
        height: auto;
        padding: var(--space-sm);
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--color-text);
        background-color: var(--color-bg-alt);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius);
        display: inline-block;
    }

    /* Text-only list (hidden by default, shown on very small screens) */
    .logo-text-list {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0 auto;
        max-width: 400px;
        text-align: left;

        & li {
            padding: var(--space-sm) var(--space-md);
            margin-bottom: var(--space-sm);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            color: var(--color-text);
            background-color: var(--color-bg-subtle);
            border-left: 3px solid var(--color-primary);
            border-radius: var(--border-radius);
            line-height: var(--line-height-base);

            @media (prefers-contrast: high) {
                border-left-width: 4px;
            }
        }

        &:last-child {
            margin-bottom: 0;
        }

        @media (max-width: 480px) {
            display: block;
        }

        @media print {
            display: block !important;
        }
    }

    .footnote {
        margin-top: var(--space-lg);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-tertiary);
        font-style: italic;
        line-height: var(--line-height-base);
        max-width: 100%;

        @media (max-width: 480px) {
            display: none;
        }
    }

    @media (prefers-contrast: high) {
        .logo-item img {
            opacity: 1;
            filter: contrast(1.6);
        }

        @media (prefers-color-scheme: dark) {
            .logo-item img {
                filter: brightness(0) invert(1) contrast(1.9);
                opacity: 1;
            }
        }

        .logo-text-list li {
            border-left-width: 4px;
        }
    }
</style>