Newer
Older
pre-www / src / assets / css / components / card.css
.cards-container{
    @apply mb-base overflow-x-clip;
    &__inner, > p{
        width: calc(100% - (var(--grid-gutter)*4));
        margin-left: auto;
        margin-right: auto;
        @screen md{
            width: calc(100vw - var(--grid-offset) - var(--grid-gutter)*2);
            margin-left: var(--grid-offset);
        }
        @screen 2xl{
            max-width: theme(screens.2xl);
            margin-left: max(var(--grid-offset), calc((100vw - theme(screens.2xl))/2))
        }
        @at-root :where(.block-container, .grid-container) .cards-container .cards-container__inner{
            @apply mx-0 px-0;
        }
        @at-root :where(.block-container, .grid-container) .cards-container > p{
            @apply mx-0 px-0;
        }
    }
    &__inner{
        @apply grid gap-[calc(var(--grid-gutter)*2)] grid-cols-12;
        > p {
            grid-column: span 12;
            @apply mb-0;
        }
    }
    > p{
        @apply font-bold mb-4;
    }
}

.card{
    /* @apply bg-grey-100 xl:grid items-start grid-cols-2 relative; */
    @apply bg-grey-100 relative flex /*flex-wrap*/ flex-col items-end aspect-square p-[calc(var(--grid-gutter)*2)] col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3;
    p{
        @apply text-black;
    }
    a{
        @apply underline;
        &:hover{
            @apply no-underline;
        }
        &[href^="mailto"]{
            @apply break-all;
        }
    }
    &__excerpt{
        @apply grow;
        @media screen and (min-width: 80rem) and (max-width: 90rem){
            hyphens:auto;
            hyphenate-limit-chars: 6;
        }
    }
    &__subtitle{
        @apply mt-4;
    }
    .card__category{
        @apply grow text-grey-300 w-full text-size-md;
    }
    &__img{
        @apply grow mb-[calc(var(--grid-gutter)*2)] -mx-[calc(var(--grid-gutter)*2)] -mt-[calc(var(--grid-gutter)*2)];
        img{
            @apply w-full h-full object-cover;
        }
    }
    &__title{
        /* @media screen and (min-width: 80rem) and (max-width: 90rem){
            hyphens:auto;
            hyphenate-limit-chars: 6;
        } */
        @apply w-full flex items-end /*items-start*/;
        > *:not(.card__icon){
            @apply text-size-lg mb-0 w-full;
        }
        > a{
            @apply no-underline;
            &[href^="mailto"]{
                @apply break-words;
            }    
        }
        .card__icon, > *:has(> .card__icon){
            @apply shrink-0 ml-3 w-auto;
        }
        > *:has(> .card__icon){
            @apply flex items-start shrink-0 ml-3 w-auto;
            .card__icon{
                @apply mt-0.5 !important;
            }
        }
        .card__icon{
            @apply relative;
        }
    }
    &__date{
        @apply text-md text-grey-300 mb-xxs;
    }
    header{
        @apply mb-base xl:mb-0;
        p{
            @apply text-size-md-lg mb-0;
            &:first-child{
                @apply flex justify-between items-start;
                a{
                    @apply top-2 relative;
                }
            }
            &:last-child:not(:first-child){
                @apply text-size-base;
            }
        }
    }
    &:hover{
        @apply bg-black text-white;
        p, span{
            @apply text-white;
        }
    }
    &--columns{
        /* aspect-ratio: unset; */
        .card__title{
            @apply items-start;
            .card__icon{
                @apply mt-2.5;
            }
        }
        > div{
            @apply w-full xl:aspect-square;
            &:first-child{
                @apply flex flex-col xl:w-full xl:h-full;
                header{
                    @apply grow;
                }
                &:last-child{
                    grid-column: span 2;
                    @apply h-full;
                }
            }
            &.card__content{
                @apply /*hidden lg:flex*/ flex flex-grow xl:flex-grow-0 items-end xl:h-full mt-base xl:mt-0;
                p{
                    @screen md{
                        display: -webkit-box;
                        -webkit-line-clamp: 7;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                    @apply mb-0;
                }
            }
        }
    }
    &--column-span{
        aspect-ratio: unset;
        @screen xl{
            align-self: inherit;
            /* aspect-ratio: 2/1; */
            aspect-ratio: 2/0.98;
        }
        @apply xl:flex-row xl:grid items-start grid-cols-2 col-span-12 lg:col-span-6;
        > div{
            @screen xl{
                aspect-ratio: unset;
            }
            .card__icon, > *:has(> .card__icon){
                @apply xl:absolute xl:right-[calc(var(--grid-gutter)*2)] /*xl:top-7*/;
            }
            footer{
                /* @apply mb-base xl:mb-0; */
                p{
                    @apply mb-0;
                }
            }    
        }
    }
    &--alt{
        @apply bg-black text-white;
        p{
            @apply text-white;
        }    
    }
    &--alt-invert{
        @apply bg-white text-black;
        > p{
            @apply text-black;
        }
        &:hover{
            @apply bg-black text-white;
            > p{
                @apply text-white;
            }
        }
    }
    &--y{
        &.card--alt{
            @apply text-yellow-100;
            p{
                @apply text-yellow-100;
            }    
        }
        &.card--alt-invert{
            @apply bg-yellow-200;
            &:hover{
                @apply text-yellow-100;
                > p{
                    @apply text-yellow-200;
                }
            }    
        }
        &:hover{
            @apply text-yellow-100;
            p, span{
                @apply text-yellow-100;
            }
        }
    }
    &--no-arrow{
        @apply items-start;
    }
    &--bottom-title{
        @apply flex-nowrap;
        .card__title{
            @apply items-end;
            p{
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        .card__icon{
            @apply top-[unset] bottom-2.5;
        }
    }
}

/** card arrows **/
.card{
    .card__icon{
        &::before{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23000'/%3E%3C/svg%3E");
            background-size: 27px 20px;
            @apply inline-block w-[27px] h-5 bg-no-repeat bg-contain;
        }
        &[href]:not(:where(
            /* exclude hash only links */
            [href^="#"],
            /* exclude relative but not double slash only links */
            [href^="/"]:not([href^="//"]),
        )){
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23000'/%3E%3C/svg%3E");
            }
        }
    }
    &:hover{
        .card__icon{
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFF'/%3E%3C/svg%3E");
            }
            &[href]:not(:where(
                /* exclude hash only links */
                [href^="#"],
                /* exclude relative but not double slash only links */
                [href^="/"]:not([href^="//"]),
            )){
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
                }
            }    
        }
    }
    &--alt{
        .card__icon{
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23fff'/%3E%3C/svg%3E");
            }
            &[href]:not(:where(
                /* exclude hash only links */
                [href^="#"],
                /* exclude relative but not double slash only links */
                [href^="/"]:not([href^="//"]),
            )){
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
                }
            }
        }
        &:hover{
            .card__icon{
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23fff'/%3E%3C/svg%3E");
                }
                &[href]:not(:where(
                    /* exclude hash only links */
                    [href^="#"],
                    /* exclude relative but not double slash only links */
                    [href^="/"]:not([href^="//"]),
                )){
                    &::before{
                        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23fff'/%3E%3C/svg%3E");
                    }
                }    
            }
        }
    }
    &--y{
        .card__icon{
            &::before{
                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E");
            }
            &[href]:not(:where(
                /* exclude hash only links */
                [href^="#"],
                /* exclude relative but not double slash only links */
                [href^="/"]:not([href^="//"]),
            )){
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E");
                }
            }
        }
        &:hover{
            .card__icon{
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m22.711 9-6.778-7.32L17.4.32 26.363 10 17.4 19.68l-1.467-1.36L22.71 11H0V9h22.711Z' fill='%23FFCC00'/%3E%3C/svg%3E");
                }
                &[href]:not(:where(
                    /* exclude hash only links */
                    [href^="#"],
                    /* exclude relative but not double slash only links */
                    [href^="/"]:not([href^="//"]),
                )){
                    &::before{
                        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m16.204 2.382-9.97-.383L6.311 0l13.182.507L20 13.689l-1.999.077-.383-9.97-16.06 16.06L.146 18.44 16.204 2.382Z' fill='%23FC0'/%3E%3C/svg%3E");
                    }
                }    
            }
        }
    }
}

.card-grid-item{
    @apply items-start;
    &__header{
        @apply grow;
    }
    &__bg{
        @apply absolute left-0 top-0 w-full h-full scale-125 origin-center opacity-0 pointer-events-none bg-black;
        img{
            @apply w-full h-full object-cover z-10 opacity-75;
        }
    }
    .card__title{
        p{
            @apply text-md font-bold;
        }
    }
    .card__category, .card__date{
        @apply text-sm;
    }
    &:hover{
        @apply bg-[#0066FF];
    }
    &--has-background{
        &.is-hovered{
            @apply bg-transparent z-20;
            p, span{
            }
            .card-grid-item__bg{
                @apply opacity-100;
            }
            &::after{
                content: '';
                @apply w-full h-full border border-white absolute left-0 top-0;
            }
        }
    }
    &--eventi{
        @apply bg-black text-white;
        p{
            @apply text-white !important;  
        }
    }
    &--page{
        @apply bg-black text-white;
        p{
            @apply text-white !important;
        }
        .card__title{
            p{
                @apply text-size-lg font-normal;
            }
        }
    }
}