airport / static / styles.css

@import "tailwindcss";
@import url("https://api.fonts.coollabs.io/css2?family=Share+Tech+Mono&display=swap");

@font-face {
    font-family: "Skyfont";
    src: url("fonts/skyfont.regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "F25_Bank_Printer";
    src: url("fonts/F25_Bank_Printer.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SpaceMono";
    src: url("fonts/SpaceMono-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);


@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    /* Hold full opacity for most of the animation */
    100% {
        opacity: 0;
    }
}

.status-message-fade {
    animation: fadeOut 2s forwards;
}

.font-spectral {
    font-family: "Spectral", serif;
}

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap>textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap>textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

/* Base styling */
@layer base {
    body {
        @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100;
        font-family: SpaceMono;
    }

    button {
        @apply rounded-xl;
        font-family: SpaceMono;
    }

    input {
        @apply px-4 py-2;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: Share Tech Mono, monospace;
    }
}

.ticket {
    font-family: F25_Bank_Printer, monospace;
    @apply bg-white dark:bg-gray-800 p-8 relative overflow-hidden;
    position: relative;
    /* Angled corners */
    clip-path: polygon(20px 0,
            /* Top left corner */
            calc(100% - 20px) 0,
            /* Top right corner */
            100% 20px,
            /* Top right */
            100% calc(100% - 20px),
            /* Bottom right */
            calc(100% - 20px) 100%,
            /* Bottom right corner */
            20px 100%,
            /* Bottom left corner */
            0 calc(100% - 20px),
            /* Bottom left */
            0 20px
            /* Back to top left */
        );
}

/* Create side perforations using pseudo-elements */
.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background-image: linear-gradient(to bottom,
            transparent 0%,
            transparent 40%,
            currentColor 40%,
            currentColor 60%,
            transparent 60%,
            transparent 100%);
    background-size: 100% 20px;
    background-repeat: repeat-y;
    opacity: 0.2;
}

.ticket::before {
    left: 8px;
}

.ticket::after {
    right: 8px;
}

.dark .ticket {
    background-image:
        radial-gradient(circle at 10px center,
            rgb(17 24 39) 4px,
            transparent 4px),
        radial-gradient(circle at calc(100% - 10px) center,
            rgb(17 24 39) 4px,
            transparent 4px);
}

/* Remove the previous background images and corner cuts */
.ticket::before,
.ticket::after {
    display: none;
}

.boarding-label {
    @apply absolute top-2 right-2 bg-blue-100 dark:bg-blue-900 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider;
    transform: rotate(2deg);
}

.flight-info {
    @apply flex justify-between items-center mt-4 pt-4 border-t border-dashed;
}

.passenger-info {
    @apply text-sm text-gray-600 dark:text-gray-400 mt-2;
}

/* Modern Airport Sign Styles */
.airport-sign {
    position: relative;
    transform-origin: top;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
}

/* Dropdown panel styles */
.airport-sign+div {
    border-radius: 0.5rem;
    backdrop-filter: blur(8px);
}

/* Remove old texture styles */
.airport-sign,
.airport-sign+div {
    background-blend-mode: overlay;
}

@keyframes popin {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-popin {
    animation: popin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bounce-short {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.animate-bounce-short {
    animation: bounce-short 0.5s;
}