website/src/styles/pages.scss

:root {
    --guide-base: #a2d4f3;

    --guide-darkest: color-mix(in srgb, var(--guide-base), #000 75%);
    --guide-darker: color-mix(in srgb, var(--guide-base), #000 50%);
    --guide-dark: color-mix(in srgb, var(--guide-base), #000 25%);

    --guide-light: color-mix(in srgb, var(--guide-base), #fff 25%);
    --guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%);
    --guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%);

    --news-base: #f8e8b1;
}

@layer page {
    .homepage {
        header:has(#header-menu-toggle:not(:checked)) .logo {
            visibility: hidden;
        }

        section {
            position: relative;

            width: 100%;
            min-height: calc(100vh - 6rem);

            &:last-of-type {
                min-height: calc(100vh - 10rem);
            }

            // display: flex;
            // flex-direction: column;
            // align-items: center;
            & {
                display: grid;
                grid-auto-flow: row;
                justify-items: center;
                align-content: start;

                gap: 2rem;

                scroll-snap-align: start;
            }

            & > .title {
                font-size: 48px;
                padding-top: 4rem;

                @media screen and (max-width: $screen-desktop-min) {
                    padding-top: 2rem;
                }
            }
        }

        .zig-zag {
            z-index: 5;

            position: absolute;
            width: 100%;

            display: flex;

            &:first-child {
                bottom: 100%;
            }
        }

        section.principal {
            z-index: 2;

            min-height: calc(100vh - 7rem);

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            align-items: center;
            place-content: center;

            gap: 4rem;

            padding: 3rem 2rem 6rem;

            background: var(--homepage-principal-bg);

            position: relative;

            .circuit-layer {
                pointer-events: none;

                z-index: 1;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

                canvas {
                    width: 100%;
                    height: 100%;
                }
            }

            & > .logo {
                z-index: 2;

                width: 32rem;

                position: relative;

                user-select: none;

                img {
                    width: 100%;
                    // filter: drop-shadow(6px 6px 0 var(--palette-black))
                    //     drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black))
                    //     drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black));
                }

                max-width: calc(100vw - 3rem);
                @media screen and (max-width: $screen-desktop-min) {
                }
            }

            & > .whats-phc {
                z-index: 2;
                background: #e4c5ff;

                --zone-color: color-mix(in lab, #e4c5ff, #000 75%);

                max-width: 37rem;

                .title {
                    text-align: center;
                }

                a {
                    text-decoration: underline 2px solid;

                    &:hover {
                        --zone-color: color-mix(in lab, #e4c5ff, #000 60%);
                    }
                }

                span.highlighted {
                    background: color-mix(in lab, #e4c5ff, #000 10%);
                    cursor: default;
                    border-radius: 0.25rem;
                    padding: 0.125rem 0.25rem;
                }
            }
        }

        section.news {
            --card-base: color-mix(in lab, var(--news-base), #fff 25%);
            --zone-color: color-mix(in lab, var(--news-base), #000 50%);

            background: var(--homepage-news-bg);

            gap: 3rem;

            padding-bottom: 6rem;

            & > .news-list {
                display: flex;
                flex-direction: row;
                gap: 3rem;

                align-items: flex-start;

                padding: 0 3rem;

                justify-content: center;
                flex-wrap: wrap;
            }

            [role='button'] {
                padding: 0.5rem 2rem;

                &.primary {
                    background: #ffdd6e;
                    color: #000d;
                }
            }
        }

        section.projects {
            background: var(--homepage-projects-bg);

            padding-bottom: 6rem;

            .project-list {
                // width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2);
                // max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene

                max-width: calc(20rem * 3 + 1.5rem * 2 + 1rem * 2);

                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
                grid-auto-flow: dense;

                gap: 1.5rem;
                padding: 0 1rem;

                & > * {
                    grid-row: span var(--masonry-height);
                }

                .project {
                    width: 100%;
                    height: 100%;

                    // background: #fcddff;
                    // background: #ffa89c;
                    background: var(--card-bg, var(--project-card-bg));
                    color: var(--card-fg, #000e);

                    @include neo-brutalist-card($size: 3px, $offset: 9px);

                    padding: 1rem;

                    display: grid;
                    grid-template-columns: auto 1fr;
                    grid-template-rows: auto 1fr;

                    gap: 0.25rem 1rem;

                    transition: all 128ms ease-out;

                    .title {
                        font-size: 32px;

                        @media screen and (max-width: $screen-desktop-min) {
                            font-size: 24px;
                        }
                    }

                    .image {
                        grid-row: span 2;
                        // place-self: center;

                        .box {
                            background: #0003;
                            border: 3px solid #0006;
                            border-radius: 6px;
                            width: 4rem;
                            height: 4rem;
                        }

                        img {
                            object-fit: cover;
                            width: 4rem;
                        }

                        // &.auto {
                        //     img {
                        //         width: auto;
                        //         height: auto;
                        //     }
                        // }
                    }

                    .description {
                        font-size: 16px;
                        @extend .text;
                    }

                    &:hover {
                        transform: translate(0, -4px);
                        box-shadow: 9px 13px 0 0 #222;
                    }
                }

                @media screen and (max-width: $screen-desktop-min) {
                    padding: 0 1rem;

                    grid-template-columns: 1fr;

                    .project {
                        padding: 0.8rem;
                    }
                }
            }
        }

        section.wanna-be-macchinista {
            background: var(--homepage-macchinisti-bg);
            color: #fdfdfd;

            padding-bottom: 6rem;

            .card {
                max-width: 40rem;
            }

            .content {
                @extend .text;
            }
        }

        @media screen and (max-width: $screen-desktop-min) {
            & > main {
                padding: 0 !important;
            }

            section.principal {
                padding: 3rem 0 6rem;

                .whats-phc {
                    padding: 1.5rem;

                    margin: 0 1rem;
                }

                #mobile-whats-phc-read-more {
                    &:checked ~ .text {
                        max-height: 7lh;
                        overflow: hidden;

                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 3lh;

                            background: linear-gradient(to bottom, transparent, #e4c5ff);
                        }
                    }

                    &:not(:checked) ~ * .button span:nth-child(1) {
                        display: none;
                    }
                    &:checked ~ * .button span:nth-child(2) {
                        display: none;
                    }
                }
            }

            section.news {
                & > .news-list {
                    padding: 0 1rem;
                }
            }

            section.projects {
                .project-list {
                    padding: 0 1rem;
                }
            }

            section.wanna-be-macchinista {
                .content {
                    padding: 0 1rem;
                }
            }

            section {
                padding: 1rem 1rem 4rem;
            }
        }
    }

    .utenti {
        background: #ffffe4;

        --filter-bg-color: #ffd270;

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem 0;

            gap: 5rem;

            max-width: 80ch;

            .search-result {
                background: #ffeabc;
            }

            button {
                background: #ffd270;
            }
        }
    }

    .appunti {
        main {
            background: #e8e8e8;

            justify-self: center;

            display: grid;
            grid-auto-flow: row;

            justify-items: center;

            padding: 3rem;

            gap: 3rem;

            width: 100%;

            position: relative;

            &::after {
                content: '';
                width: 100%;
                height: 80vh;

                background: linear-gradient(to bottom, transparent, #e8e8e8);

                position: absolute;
                bottom: 0;
                left: 0;
            }

            .search {
                max-width: 80ch;
            }

            .appunti-scrollable {
                justify-self: stretch;

                &.center {
                    justify-self: center;
                }
            }
        }
    }

    .domande-esami {
        background: hsl(180, 100%, 95%);
        --card-base: hsl(180, 100%, 85%);

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 4rem 0;

            gap: 2rem;

            .search {
                max-width: 80ch;
            }

            button {
                background: hsl(180, 100%, 72%);
            }

            .card a {
                color: color-mix(in srgb, var(--card-base-internal), #000 80%);
            }
        }
    }

    // .login {
    //     background: #ddfaff;

    //     main {
    //         justify-self: center;

    //         display: flex;
    //         flex-direction: column;
    //         align-items: center;

    //         max-width: 80ch;
    //         padding: 3rem 0;

    //         gap: 3rem;

    //         h3 {
    //             font-size: 28px;
    //             font-weight: 600;
    //         }
    //     }
    // }

    //
    // Notizie
    //

    .notizie,
    .notizia {
        --card-base: color-mix(in lab, var(--news-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--news-base), #000 75%);
        background: color-mix(in lab, var(--news-base), #fff 90%);
    }

    .notizie {
        h1 > a {
            &:hover {
                text-decoration: underline 3px solid;
            }
        }

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem;
            gap: 5rem;
        }
    }

    .notizia {
        main {
            --card-base: color-mix(in lab, var(--news-base), #fff 25%);

            max-width: calc(46rem + 2rem * 2);
            justify-self: center;
            padding: 3rem 2rem 2rem;

            margin-top: 3rem;
            margin-bottom: 6rem;

            @media screen and (max-width: $screen-desktop-min) {
                box-shadow: none;
                border: none;
                border-radius: 0;
                max-width: none;

                margin: 0 auto;
            }
        }
    }

    //
    // Guide
    //

    .guide,
    .guida {
        --card-base: color-mix(in lab, var(--guide-base), #fff 25%);
        --zone-color: color-mix(in lab, var(--guide-base), #000 75%);
        background: color-mix(in lab, var(--guide-base), #fff 90%);
    }

    .guide {
        h1 > a {
            &:hover {
                text-decoration: underline 3px solid;
            }
        }

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem;
            gap: 5rem;
        }
    }

    .guida {
        main {
            --card-base: color-mix(in lab, var(--guide-base), #fff 50%);

            max-width: calc(46rem + 2rem * 2);
            justify-self: center;
            padding: 3rem 2rem 2rem;

            margin-top: 3rem;
            margin-bottom: 6rem;

            position: relative;

            .metadata {
                position: absolute;
                top: -2px;
                left: calc(100% + 2rem);
                width: 15rem;

                display: grid;
                grid-auto-flow: row;
                gap: 1rem;

                justify-items: start;

                .metadata-item {
                    background: var(--card-base);

                    display: grid;
                    grid-template-rows: auto auto;
                    justify-items: start;
                    gap: 0.25rem;

                    padding: 0.75rem 1rem;

                    @include neo-brutalist-card($size: 3px);

                    .tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 0.5rem;
                    }
                }
            }

            @media screen and (max-width: $screen-desktop-min) {
                box-shadow: none;
                border: none;
                border-radius: 0;
                max-width: none;

                margin: 0 auto;

                .metadata {
                    position: static;
                    padding: 0;
                    width: auto;
                    margin: 0;

                    --card-base: color-mix(in lab, var(--guide-base), #fff 30%);
                }
            }
        }
    }

    .tag {
        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem 0;
            gap: 5rem;
        }
    }

    .storia {
        --card-base: #e4c5ff;

        main {
            justify-self: center;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 5rem 0;
            gap: 3rem;

            // background horizontal linear gradient that is black in the center
            background: linear-gradient(
                to right,
                #ffe4c544 0%,
                // #ffe4c599 25%,
                #ffe4c5ff 50%,
                // #ffe4c599 75%,
                #ffe4c544 100%
            );
        }
    }

    .macchinisti {
        main {
            justify-self: center;
            background: linear-gradient(to top, #d5fbff, #ffd9d5);

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 4.5rem 3rem;
            gap: 4.5rem;
        }
    }

    //
    // Meta
    //

    .design {
        grid-template-columns: minmax(15rem, 2fr) 10fr;

        @media screen and (max-width: 1400px) {
            grid-template-columns: 1fr;
        }

        aside {
            margin: 1rem;
            padding: 1rem;

            @include neo-brutalist-card();

            background: #f0f0f0;

            align-self: start;
            position: sticky;
            top: 7rem;
            height: calc(100dvh - 8rem - 6rem);

            nav {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;

                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;

                    li {
                        padding-left: calc((var(--depth) - 1) * 1rem);

                        display: flex;

                        a {
                            display: block;

                            font-size: 16px;
                            font-weight: 600;

                            transform: translate(-0.25rem, 0);

                            padding: 0.125rem 0.25rem;
                            border-radius: 0.125rem;

                            color: #444;

                            &:hover {
                                background: #00000018;
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 1400px) {
                display: none;
            }
        }

        footer {
            grid-column: 1 / -1;
        }

        main {
            justify-self: center;

            @media screen and (min-width: $screen-desktop-min) {
                padding: 3rem 0;
            }
        }

        pre[data-language='astro'] {
            --code-bg: #fff7ef;

            width: 100%;
            max-width: 46rem;
        }

        .container {
            margin: 2rem auto;

            border: 2px dashed #ddd;

            position: relative;
            z-index: 1;

            &.large {
                min-width: calc(100% - 4rem);
            }

            &:not(.large) {
                & > .content {
                    display: grid;
                    place-content: center;
                }
            }

            & > .content {
                padding: 2rem;

                overflow: auto;
            }

            // label in the top left corner
            &::before {
                content: 'Preview';
                position: absolute;

                bottom: 100%;
                left: 0;

                padding: 0.125rem 0.5rem;

                background: #eee;
                color: #000;

                font-family: var(--font-display);
                font-size: 14px;

                border-radius: 0.25rem;

                z-index: -1;

                transform: translate(-2px, -4px);

                opacity: 0;
                transition: opacity 64ms ease-in;
            }

            &:hover {
                border-color: #bbb;

                &::before {
                    opacity: 1;
                }
            }
        }

        .palette {
            margin: 2rem auto;

            display: grid;
            grid-template-columns: auto auto;

            gap: 1rem;

            place-content: center;

            & > .color {
                width: 2rem;
                height: 2rem;
                border-radius: 0.25rem;

                border: 2px solid #000;
                box-shadow: 4px 4px 0 0 #000;

                overflow: hidden;

                & > .region {
                    width: 100%;
                    height: 100%;

                    border: 2px solid #fff;

                    border-radius: 4px;
                }
            }

            & > .label {
                display: grid;
                align-content: center;

                font-family: 'JetBrains Mono', var(--font-mono);
                font-size: 16px;

                user-select: all;
            }
        }
    }
}