Changing a div with a class to a semantic tag seemingly breaks another element's CSS in dark mode
14:44 14 Nov 2025

I wrote a site with Eleventy and want to use less

elements. Currently this is what the HTML and CSS for a page look like:

Current HTML:



  
    ...
  
  
    

        
Pasta's Corner

    

    


    ...


    

        ...

Current CSS:

:root {
    --content-width: 900px;
    --accent-color: hsl(0 0% 50%);
    
    --color-percent-dark-offset: 25;
    --color-percent-light-offset: 40;
    --color-percent-darker-offset: 35;
    --color-percent-lighter-offset: 45;
    --hue-offset: 0;
    
    --light-hsl-value: hsl(from var(--accent-color) h s calc(l + var(--color-percent-light-offset)));
    --dark-hsl-value: hsl(from var(--accent-color) h s calc(l - var(--color-percent-dark-offset)));
    --light-hsl-value-alpha: hsl(from var(--accent-color) h s calc(l + (var(--color-percent-light-offset) - 10)) / 0.8);
    --dark-hsl-value-alpha: hsl(from var(--accent-color) h s calc(l - (var(--color-percent-dark-offset) - 4)) / 0.8);
    --lighter-hsl-value: hsl(from var(--accent-color) calc(h + var(--hue-offset)) s calc(l + var(--color-percent-lighter-offset)));
    --darker-hsl-value: hsl(from var(--accent-color) calc(h + var(--hue-offset)) s calc(l - var(--color-percent-darker-offset)));
    --lighter-hsl-value-mono: hsl(0 0 calc(50 + var(--color-percent-lighter-offset)));
    --darker-hsl-value-mono: hsl(0 0 calc(50 - var(--color-percent-darker-offset)));

    --blur-px: 10px;
    --border-radius-px: 5px;
}

...

body {
    ...
}

main {
    ...
}

nav {
    background-color: var(--light-hsl-value-alpha);
    backdrop-filter: blur(var(--blur-px));
    position: sticky;
    top: 0;
    
    ul {
        display: flex;
        justify-content: space-around;
        list-style-type: none;
        max-width: var(--content-width);
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0;

        li {
            display: flex;

            a {
                padding: 10px;
            }

            a:link {
                font-weight: bold;
                text-decoration: none;
                color: var(--dark-hsl-value);
            }

            a:visited {
                color: var(--dark-hsl-value);
            }
        }

        .current-section {
            border-width:0 0 4px 0;
            border-style: solid;
            border-color: var(--dark-hsl-value);
        }

    }
}

...

a:link, a:visited {
    color: var(--dark-hsl-value);
}
...

footer {
    ...
}

.header-bar {
    display: flex;
    justify-content: center;
    background-color: var(--light-hsl-value-alpha);
    backdrop-filter: blur(var(--blur-px));
    margin: 0;

    h1 {
        color: var(--dark-hsl-value);
        font-family: "Badeen Display", sans-serif;
        font-weight: normal;
        font-size: 3em;
        text-align: center;
    }
}

...

@supports(color: AccentColor){
    :root {
        --accent-color: AccentColor;
    }
}

...

@media (prefers-color-scheme: dark){
    .header-bar, nav {
        background-color: var(--dark-hsl-value-alpha);

        h1 {
            color: var(--light-hsl-value);
        }

        a:link, a:visited {
            color: var(--light-hsl-value);
        }

        .current-section {
            border-color: var(--light-hsl-value);
        }
    }

    ...

    body {
        ...
    }

    a:link, a:visited {
        color: var(--light-hsl-value);
    }
}

The focus of the issue is in the

html css eleventy