139 lines
3.4 KiB
CSS
139 lines
3.4 KiB
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)
|
|
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
|
|
.glass {
|
|
background: rgba(17, 24, 39, 0.2); /* --surface at 60% */
|
|
-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;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|