digital-card/resources/css/app.css

/* resources/css/app.css */
@import "../../node_modules/@fortawesome/fontawesome-free/css/all.min.css";

/* Other CSS rules */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Tan Pearl';
    src: url('tanPearl.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@media (prefers-color-scheme: dark) {

    html,
    body {
        background-color: #ffffff;
        color: #000000;
    }

    /* Override any other dark mode specific styles */
    .dark\:bg-gray-900 {
        background-color: #ffffff !important;
    }

    .dark\:text-white {
        color: #000000 !important;
    }
}

/* Remove outline on focus for all elements */
*:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
}

body.no-scroll {
    overflow: hidden;
}

.fade-in {
    opacity: 1;
}

.petal-overlay {
    position: fixed;
    /* Fixes the position to the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Allows interactions through the overlay */
    z-index: 1;
    /* Ensures it is on top of other elements */
    opacity: 0.3;
}

.petal-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the entire container */
}


.loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 6rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
}

.loader:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem #fff;
    animation-name: pulsIn;
}

.loader:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 #fff;
}

.part {
    transition: all 0.1s ease-in-out;
}

@keyframes to-left{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}

@keyframes to-right{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .part.left {
            animation: to-left linear both;
            animation-timeline: scroll();
            animation-range-end: 4%;
        }

        .part.right {
            animation: to-right linear both;
            animation-timeline: scroll();
            animation-range-end: 4%;
        }
    }
}


@keyframes pulsIn {
    0% {
        box-shadow: inset 0 0 0 1rem #fff;
        opacity: 1;
    }

    50%,
    100% {
        box-shadow: inset 0 0 0 0 #fff;
        opacity: 0;
    }
}

@keyframes pulsOut {

    0%,
    50% {
        box-shadow: 0 0 0 0 #fff;
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 1rem #fff;
        opacity: 1;
    }
}

@keyframes to-right {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}


@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        #right-cover {
            animation: to-right linear both;
            animation-timeline: scroll();
            animation-range: contain;
        }
    }
}