FlightsAPI/resources/css/app.css

:root {
    --bg: #0a0f1c;           /* deep night sky */
    --surface: #111827;      /* panels */
    --surface-alt: #0f172a;  /* slight variation */
    --text: #e6edf3;         /* crisp readable */
    --muted: #94a3b8;        /* secondary text */
    --accent: #38bdf8;       /* sky blue */
    --accent-soft: #0ea5e9;  /* deeper blue */
    --accent-glow: rgba(56, 189, 248, 0.15);
    --border: #1f2937;
    --table-heading: #ffc107;
    --table-border: rgba(255,193,7,0.2)

}

/* Share Tech Mono */
@font-face {
    font-family: 'Share Tech Mono';
    src: url('/fonts/share-tech-mono-v16-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Barlow */
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/barlow-v13-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('/fonts/barlow-v13-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('/fonts/barlow-v13-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Barlow Condensed */
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/barlow-condensed-v13-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


a, a:visited {
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}



.glass {
     background: rgb(0 12 41 / 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(56, 189, 248, 0.05);
}

.glass-border {
    border: 1px solid rgba(56, 189, 248, 0.15);  /* --accent at low opacity */
}

body {
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(56, 189, 248, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 50%);
}


/*
 * flight-classes
 * Apply .class-{name}-global to any element to get the themed background, border, and colour.
 */

.class-economy-global {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #778;
}

.class-premium-global {
    background: rgba(75, 32, 137, 0.35);
    border: 1px solid rgba(180, 130, 255, 0.25);
    color: #c49dff;
}

.class-premium_economy-global {
    background: rgba(75, 32, 137, 0.35);
    border: 1px solid rgba(180, 130, 255, 0.25);
    color: #c49dff;
}

/* ── Business: Gold ── */
.class-business-global {
    background: rgba(184, 134, 11, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    position: relative;
    overflow: hidden;
}

.class-general_aviation-global {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    position: relative;
    overflow: hidden;
}

.class-crew-global {
    background: rgba(198, 120, 110, 0.15);
    border: 1px solid rgba(198, 120, 110, 0.3);
    color: #c6786e;
    position: relative;
    overflow: hidden;
}

/* ── First: Platinum ── */
.class-first-global {
    background: linear-gradient(
        135deg,
        rgba(160, 175, 190, 0.15) 0%,
        rgba(210, 225, 240, 0.22) 45%,
        rgba(150, 168, 185, 0.12) 100%
    );
    border: 1px solid rgba(210, 225, 240, 0.45);
    color: #ddeeff;
    text-shadow: 0 0 10px rgba(200, 220, 245, 0.6);
    position: relative;
    overflow: hidden;
}


/* ── Private: Platinum (more intense) ── */
.class-private-global {
    background: linear-gradient(
        135deg,
        rgba(160, 175, 190, 0.15) 0%,
        rgba(210, 225, 240, 0.22) 45%,
        rgba(150, 168, 185, 0.12) 100%
    );
    border: 1px solid rgba(210, 225, 240, 0.45);
    color: #ddeeff;
    text-shadow: 0 0 10px rgba(200, 220, 245, 0.6);
    position: relative;
    overflow: hidden;
}

.class-generic-global{
    background: var(--accent-glow, rgba(255,193,7,0.1));
    border: 1px solid var(--accent-soft, rgba(255,193,7,0.25));
    color: var(--accent, #ffc107);
}

.class-private-global::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(230, 242, 255, 0.6) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: class-shimmer 1.8s ease-in-out infinite;
    pointer-events: none;
}

.class-unspecified-global {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #445566;
}

@keyframes class-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.class-unspecified-global {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #445566;
}

.difficulty-easy-global {
    background: rgba(34, 139, 34, 0.2);
    border: 1px solid rgba(100, 200, 100, 0.25);
    color: #7ec87e;
}

.difficulty-moderate-global {
    background: rgba(30, 100, 200, 0.2);
    border: 1px solid rgba(80, 150, 255, 0.25);
    color: #7eb8ff;
}

.difficulty-hard-global {
    background: rgba(200, 80, 30, 0.2);
    border: 1px solid rgba(255, 130, 80, 0.25);
    color: #ff9b6a;
}

.difficulty-expensive-global {
    background: rgba(180, 60, 180, 0.2);
    border: 1px solid rgba(220, 120, 220, 0.25);
    color: #df8fdf;
}

.difficulty-near-impossible-global {
    background: rgba(160, 20, 20, 0.25);
    border: 1px solid rgba(220, 60, 60, 0.3);
    color: #e87070;
}

.difficulty-impossible-global {
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(120, 120, 140, 0.3);
    color: #888899;
}