/* ═══════════════════════════════════════════════════════════════════
RIHLA NOIR — Premium Dark Design System
OLED black · aurora glow · glass surfaces · Clash Display
Scoped under body.noir — overrides base styles.css
═══════════════════════════════════════════════════════════════════ */
/* ── Tokens ──────────────────────────────────────────────────────── */
body.noir {
/* Core palette */
--bg: #060609;
--bg-elev: #0b0b10;
--surface: rgba(255,255,255,0.035);
--surface-2: rgba(255,255,255,0.065);
--surface-3: rgba(255,255,255,0.10);
--line: rgba(255,255,255,0.09);
--line-strong: rgba(255,255,255,0.17);
--text: #f3f6fb;
--text-2: rgba(231,237,246,0.64);
--text-3: rgba(231,237,246,0.40);
--accent: #2aa9e0;
--accent-deep: #1b87c0;
--accent-ink: #04141f;
--accent-glow: rgba(42,169,224,0.32);
--accent-soft: #7ecbee;
--gold: #f5c318;
--gold-glow: rgba(245,195,24,0.25);
--ok: #4ade80;
--warn: #fbbf24;
--bad: #ff7d7d;
--r-card: 22px;
--r-input: 12px;
--r-pill: 999px;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
/* Legacy var remap — flips all inline-styled JS content to dark */
--color-midnight-ink: #f2f5fa;
--color-pure-canvas: #0b0b10;
--color-graphite: #dbe1ea;
--color-slate: #a8b1c0;
--color-ash: #7d8697;
--color-fog: #5e6675;
--color-silver: rgba(255,255,255,0.16);
--color-rihla-blue: #2aa9e0;
--color-rihla-blue-dark: #1b87c0;
--color-rihla-gold: #f5c318;
--color-rihla-navy: #07070c;
--gradient-rihla: linear-gradient(135deg, #1b87c0 0%, #2aa9e0 55%, #5cc0ec 100%);
--gradient-hero: radial-gradient(120% 140% at 18% 0%, #123a56 0%, #0a1c2e 46%, #07070c 100%);
--gradient-gold: linear-gradient(135deg, #f5c318 0%, #e5a800 100%);
--shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
--shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
--shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.45);
/* Light "ticket-stub" chips (intentional light islands w/ black inline text) */
--sl-sky: #d9ecff;
--sl-concrete: #eef0f3;
--sl-white: #ffffff;
--sl-black: #000000;
--sl-yellow: #f5c318;
--sl-green: #b8e986;
--sl-pink: #ffb5ca;
--sl-orange: #ffc97a;
--sl-purple: #d6b4fa;
--sl-teal: #9ce9d8;
--sl-coral: #ff9e7d;
--sl-border: 1px solid rgba(0,0,0,0.85);
--sl-radius: 16px;
--sl-radius-pill: 999px;
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── Ambient aurora field (fixed, behind everything) ─────────────── */
body.noir::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(52% 38% at 12% -6%, rgba(31,143,208,0.20) 0%, transparent 70%),
radial-gradient(44% 34% at 88% 4%, rgba(42,169,224,0.10) 0%, transparent 70%),
radial-gradient(40% 36% at 78% 92%, rgba(245,195,24,0.05) 0%, transparent 70%),
radial-gradient(46% 40% at 8% 86%, rgba(31,143,208,0.08) 0%, transparent 70%),
var(--bg);
}
/* ── Film grain (fixed, pointer-events-none) ─────────────────────── */
body.noir::after {
content: '';
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 128px 128px;
mix-blend-mode: overlay;
}
/* ── Selection / scrollbar / focus ───────────────────────────────── */
body.noir ::selection { background: var(--accent); color: var(--accent-ink); }
body.noir::-webkit-scrollbar { width: 10px; }
body.noir::-webkit-scrollbar-track { background: var(--bg); }
body.noir::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; border: 2px solid var(--bg); }
body.noir::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }
body.noir :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* ═══════════════════════════════════════════════════════════════════
1 · MARQUEE
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-marquee-wrap {
background: transparent;
height: 38px;
overflow: hidden;
display: flex;
align-items: center;
border-bottom: 1px solid var(--line);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.noir .sl-marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: noirMarquee 36s linear infinite;
color: var(--text-3);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
@keyframes noirMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.noir .sl-marquee-item { padding: 0 28px; white-space: nowrap; }
body.noir .sl-marquee-sep { color: var(--accent); opacity: 0.5; }
/* ═══════════════════════════════════════════════════════════════════
2 · NAV — floating glass pill
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-nav-outer {
background: transparent;
padding: 16px 24px 0;
position: sticky;
top: 0;
z-index: 100;
}
body.noir .sl-nav {
max-width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
background: rgba(12,12,18,0.62);
-webkit-backdrop-filter: blur(22px) saturate(1.4);
backdrop-filter: blur(22px) saturate(1.4);
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 44px rgba(0,0,0,0.5);
border-radius: var(--r-pill);
padding: 8px 8px 8px 24px;
}
body.noir .sl-nav-logo {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
color: var(--text);
text-decoration: none;
margin-right: 28px;
flex-shrink: 0;
letter-spacing: -0.01em;
display: inline-flex;
align-items: center;
}
body.noir .sl-nav-logo::before {
content: '';
width: 28px;
height: 28px;
background: url('/img/logo.svg') center / contain no-repeat;
display: inline-block;
margin-right: 10px;
flex-shrink: 0;
filter: drop-shadow(0 0 12px rgba(42,169,224,0.35));
}
body.noir .sl-logo-sep { color: var(--text-3); margin: 0 6px; }
body.noir .sl-logo-arabic { font-family: var(--font-body); font-size: 14px; color: var(--gold); }
body.noir .sl-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
body.noir .sl-nav-link {
font-size: 13.5px;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
padding: 8px 15px;
border-radius: var(--r-pill);
position: relative;
transition: color 0.2s ease, background 0.2s ease;
}
body.noir .sl-nav-link:hover { color: var(--text); background: var(--surface-2); }
body.noir .sl-nav-link.sl-active { color: var(--text); background: var(--surface-2); }
body.noir .sl-nav-link.sl-active::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1px;
width: 14px;
height: 2px;
border-radius: 2px;
background: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}
body.noir .sl-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.noir .sl-nav-actions .btn,
body.noir .sl-nav-actions a[href] {
border-radius: var(--r-pill) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 9px 18px !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
border: 1px solid transparent !important;
transition: transform 0.25s var(--ease), background 0.2s ease, box-shadow 0.25s ease;
}
body.noir .sl-nav-actions .btn-primary {
background: #fff !important;
color: #07070c !important;
}
body.noir .sl-nav-actions .btn-primary:hover { box-shadow: 0 6px 24px rgba(255,255,255,0.18); transform: translateY(-1px); }
body.noir .sl-nav-actions .btn-ghost {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--line-strong) !important;
}
body.noir .sl-nav-actions .btn-ghost:hover { background: var(--surface-2) !important; }
body.noir .sl-nav-actions .btn-gold {
background: var(--gold) !important;
color: #1a1200 !important;
}
body.noir .sl-nav-actions .btn-gold:hover { box-shadow: 0 6px 22px var(--gold-glow); transform: translateY(-1px); }
body.noir .sl-nav-actions .spinner,
body.noir #nav-actions .spinner {
border-color: rgba(255,255,255,0.18) !important;
border-top-color: var(--accent) !important;
}
body.noir .nav-user-pill {
display: flex !important;
align-items: center;
gap: 8px;
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-pill) !important;
padding: 5px 15px 5px 5px !important;
font-size: 13px !important;
font-weight: 500;
color: var(--text) !important;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
body.noir .nav-user-pill:hover { background: var(--surface-2) !important; border-color: var(--line-strong) !important; }
body.noir .avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--gradient-rihla);
color: #04141f;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 12px var(--accent-glow);
}
/* Legacy .nav (app pages: checkout, my-bookings, invoice, dashboard…) */
body.noir .nav {
background: rgba(10,10,15,0.66);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 100;
}
body.noir .nav-logo { font-family: var(--font-display); font-weight: 600; color: var(--text); display: flex; align-items: center; }
/* The nav logo now uses the official /brand/rihla-logo.png ![]()
, so the old
::before logo mark is only drawn for the legacy text logos (no ![]()
). */
body.noir .nav-logo:not(:has(img))::before {
content: '';
width: 26px;
height: 26px;
background: url('/img/logo.svg') center / contain no-repeat;
display: inline-block;
margin-right: 9px;
flex-shrink: 0;
filter: drop-shadow(0 0 12px rgba(42,169,224,0.35));
}
body.noir .nav-logo .logo-arabic { color: var(--gold); font-family: var(--font-body); }
body.noir .nav-logo .logo-sep { color: var(--text-3); }
body.noir .nav-link { color: var(--text-2); border-radius: var(--r-pill); }
body.noir .nav-link:hover { color: var(--text); background: var(--surface-2); }
body.noir .nav-link.active { color: var(--accent); background: rgba(42,169,224,0.10); }
/* ═══════════════════════════════════════════════════════════════════
3 · BUTTONS
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 26px;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
text-decoration: none;
border: 1px solid transparent;
line-height: 1;
white-space: nowrap;
will-change: transform;
transition: transform 0.28s var(--ease), background 0.2s ease, color 0.2s ease,
border-color 0.2s ease, box-shadow 0.28s ease;
}
body.noir .sl-btn:hover { transform: translateY(-2px); }
body.noir .sl-btn:active { transform: translateY(1px) scale(0.97); transition-duration: 0.08s; }
body.noir .sl-btn-black { background: #fff; color: #07070c; }
body.noir .sl-btn-black:hover { box-shadow: 0 10px 36px rgba(255,255,255,0.16); }
body.noir .sl-btn-outline,
body.noir .sl-btn-outline-white {
background: var(--surface);
color: var(--text);
border-color: var(--line-strong);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
body.noir .sl-btn-outline:hover,
body.noir .sl-btn-outline-white:hover {
background: var(--surface-2);
border-color: rgba(42,169,224,0.45);
box-shadow: 0 8px 30px rgba(42,169,224,0.12);
}
body.noir .sl-btn-yellow {
background: linear-gradient(135deg, var(--accent-deep), var(--accent));
color: var(--accent-ink);
font-weight: 700;
}
body.noir .sl-btn-yellow:hover { box-shadow: 0 10px 38px var(--accent-glow); }
body.noir .sl-btn-lg { padding: 15px 34px; font-size: 15px; }
body.noir .sl-btn-sm { padding: 8px 18px; font-size: 12.5px; }
/* Base .btn family (app + admin pages) */
body.noir .btn {
border-radius: var(--r-pill);
font-weight: 600;
letter-spacing: -0.01em;
transition: transform 0.25s var(--ease), background 0.2s ease, color 0.2s ease,
border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
body.noir .btn:hover { opacity: 1; transform: translateY(-1px); }
body.noir .btn:active { transform: scale(0.97); }
body.noir .btn-primary { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: var(--accent-ink); }
body.noir .btn-primary:hover { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); box-shadow: 0 8px 28px var(--accent-glow); }
body.noir .btn-gold { background: var(--gold); color: #1a1200; }
body.noir .btn-gold:hover { box-shadow: 0 8px 26px var(--gold-glow); }
body.noir .btn-dark { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
body.noir .btn-white { background: #fff; color: #07070c; }
body.noir .btn-white:hover { box-shadow: 0 8px 28px rgba(255,255,255,0.16); }
body.noir .btn-ghost {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line-strong);
}
body.noir .btn-ghost:hover { background: var(--surface-2); }
body.noir .btn-ghost-dark {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line-strong);
}
body.noir .btn-ghost-dark:hover { background: var(--surface-2); border-color: rgba(42,169,224,0.4); }
body.noir .btn-danger { background: rgba(255,99,99,0.10); color: var(--bad); border: 1px solid rgba(255,99,99,0.32); }
body.noir .btn-danger:hover { background: rgba(255,99,99,0.18); }
body.noir .btn-success { background: rgba(74,222,128,0.10); color: var(--ok); border: 1px solid rgba(74,222,128,0.32); }
body.noir .btn-outline-blue { background: rgba(42,169,224,0.08); color: var(--accent); border: 1px solid rgba(42,169,224,0.4); }
body.noir .btn-outline-blue:hover { background: rgba(42,169,224,0.16); }
body.noir .btn-icon { border-radius: 12px; }
/* ═══════════════════════════════════════════════════════════════════
4 · HERO — cinematic aurora
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-hero {
background: transparent;
min-height: min(88dvh, 860px);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 96px 24px 120px;
}
body.noir .sl-hero::before {
content: '';
position: absolute;
inset: -20% -10%;
pointer-events: none;
background:
radial-gradient(38% 44% at 76% 24%, rgba(42,169,224,0.17) 0%, transparent 70%),
radial-gradient(30% 36% at 88% 64%, rgba(31,143,208,0.13) 0%, transparent 70%),
radial-gradient(26% 30% at 62% 80%, rgba(245,195,24,0.06) 0%, transparent 70%);
filter: blur(46px);
animation: noirAurora 16s ease-in-out infinite alternate;
}
@keyframes noirAurora {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
100% { transform: translate3d(2%, -2.5%, 0) scale(1.02); }
}
body.noir .sl-hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1.4px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(75% 70% at 70% 30%, #000 0%, transparent 100%);
mask-image: radial-gradient(75% 70% at 70% 30%, #000 0%, transparent 100%);
}
body.noir .sl-hero-ribbon { display: none; }
body.noir .sl-sticker { display: none; }
body.noir .sl-hero-inner { max-width: 1140px; width: 100%; margin: 0 auto; position: relative; z-index: 2; }
body.noir .sl-hero-label {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text-2);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: var(--r-pill);
margin-bottom: 28px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
body.noir .sl-hero-label::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
animation: noirPulse 2.4s ease-in-out infinite;
}
@keyframes noirPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
body.noir .sl-hero-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(46px, 6vw, 92px);
line-height: 1.0;
letter-spacing: -0.03em;
text-transform: none;
color: var(--text);
margin: 0 0 26px;
}
body.noir .sl-hero-sub {
font-size: 17px;
line-height: 1.7;
color: var(--text-2);
max-width: 520px;
margin: 0 0 40px;
}
body.noir .sl-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 72px; }
body.noir .sl-hero-stats {
display: flex;
gap: 0;
flex-wrap: wrap;
border-top: 1px solid var(--line);
padding-top: 28px;
max-width: 640px;
}
body.noir .sl-hero-stats > div { padding-right: 52px; }
body.noir .sl-stat-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 42px;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
}
body.noir .sl-stat-label {
font-size: 11px;
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.14em;
margin-top: 7px;
}
/* Word-mask reveal (animations.js wraps hero words) */
body.noir .nw-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
body.noir .nw-word {
display: inline-block;
will-change: transform;
background: linear-gradient(180deg, #ffffff 58%, #9fb8cc 130%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ═══════════════════════════════════════════════════════════════════
5 · SECTIONS
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-section { padding: 110px 24px; position: relative; }
body.noir .sl-section-white { background: transparent; }
body.noir .sl-section-concrete {
background: rgba(255,255,255,0.016);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
body.noir .sl-section-sky {
background:
radial-gradient(60% 90% at 50% 0%, rgba(31,143,208,0.10) 0%, transparent 70%);
border-top: 1px solid var(--line);
}
body.noir .sl-container { max-width: 1140px; margin: 0 auto; }
body.noir .sl-section-header { text-align: center; margin-bottom: 64px; }
body.noir .sl-section-header-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 52px;
flex-wrap: wrap;
gap: 20px;
}
body.noir .sl-label-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text-2);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 15px;
border-radius: var(--r-pill);
margin-bottom: 16px;
}
body.noir .sl-label-white { background: var(--surface) !important; color: var(--text-2) !important; }
body.noir .sl-section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(32px, 4.6vw, 56px);
letter-spacing: -0.025em;
text-transform: none;
color: var(--text);
margin: 0 0 12px;
line-height: 1.04;
}
body.noir .sl-section-sub { font-size: 15.5px; color: var(--text-2); margin: 0; line-height: 1.65; }
/* ═══════════════════════════════════════════════════════════════════
6 · EVENT CARDS — glass + cursor spotlight
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 20px;
}
body.noir .event-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
cursor: pointer;
position: relative;
transform-style: flat;
will-change: transform;
transition: transform 0.34s var(--ease), border-color 0.25s ease, box-shadow 0.34s ease;
}
body.noir .event-card:hover {
transform: translateY(-6px);
border-color: rgba(42,169,224,0.36);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5), 0 8px 40px rgba(42,169,224,0.10);
}
body.noir .event-card:active { transform: scale(0.985); }
body.noir .card-gloss {
display: block;
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 3;
opacity: 0;
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(42,169,224,0.10), transparent 65%);
transition: opacity 0.3s ease;
}
body.noir .event-card:hover .card-gloss { opacity: 1; }
body.noir .event-card-img-placeholder {
width: 100%;
height: 158px;
display: flex;
align-items: center;
justify-content: center;
font-size: 52px;
background:
radial-gradient(70% 110% at 30% 0%, rgba(42,169,224,0.16) 0%, transparent 60%),
linear-gradient(150deg, #101a2c 0%, #0a0e19 100%);
border-bottom: 1px solid var(--line);
text-shadow: 0 0 36px rgba(42,169,224,0.45);
}
body.noir .event-card-img { border-bottom: 1px solid var(--line); }
body.noir .event-card-body { padding: 20px 20px 10px; }
body.noir .event-card-genre {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
body.noir .event-card-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 21px;
letter-spacing: -0.015em;
text-transform: none;
color: var(--text);
line-height: 1.12;
margin-bottom: 4px;
}
body.noir .event-card-arabic { font-size: 13px; color: var(--text-3); margin-bottom: 12px; direction: rtl; }
body.noir .event-card-meta { font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
body.noir .event-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-top: 1px solid var(--line);
margin-top: 10px;
background: rgba(255,255,255,0.015);
}
body.noir .event-card-price { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text); }
body.noir .event-card-price span { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--text-3); }
body.noir .available-badge {
background: rgba(74,222,128,0.10);
border: 1px solid rgba(74,222,128,0.35);
color: var(--ok);
border-radius: var(--r-pill);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
}
body.noir .sold-out-badge {
background: rgba(255,99,99,0.08);
border: 1px solid rgba(255,99,99,0.3);
color: var(--bad);
border-radius: var(--r-pill);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
}
/* ═══════════════════════════════════════════════════════════════════
7 · FEATURE CARDS — glass with tinted icon chips
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
body.noir .sl-feature-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 30px;
position: relative;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
color: var(--text);
will-change: transform;
transition: transform 0.32s var(--ease), border-color 0.25s ease, box-shadow 0.32s ease;
}
body.noir .sl-feature-card:hover {
transform: translateY(-5px);
border-color: var(--line-strong);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 50px rgba(0,0,0,0.45);
}
body.noir .sl-feature-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.06), transparent 65%);
transition: opacity 0.3s ease;
}
body.noir .sl-feature-card:hover::before { opacity: 1; }
body.noir .sl-feature-icon {
font-size: 26px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 16px;
background: var(--surface-2);
border: 1px solid var(--line);
margin-bottom: 20px;
}
/* Rihla blue + gold accent family — cohesive with the logo */
body.noir .sl-feature-card.sl-sticker-yellow .sl-feature-icon { background: rgba(245,195,24,0.10); border-color: rgba(245,195,24,0.30); }
body.noir .sl-feature-card.sl-sticker-pink .sl-feature-icon { background: rgba(42,169,224,0.12); border-color: rgba(42,169,224,0.32); }
body.noir .sl-feature-card.sl-sticker-teal .sl-feature-icon { background: rgba(92,192,236,0.12); border-color: rgba(92,192,236,0.32); }
body.noir .sl-feature-card.sl-sticker-green .sl-feature-icon { background: rgba(27,135,192,0.14); border-color: rgba(27,135,192,0.34); }
body.noir .sl-feature-card.sl-sticker-orange .sl-feature-icon { background: rgba(245,195,24,0.10); border-color: rgba(245,195,24,0.30); }
body.noir .sl-feature-card.sl-sticker-purple .sl-feature-icon { background: rgba(126,203,238,0.12); border-color: rgba(126,203,238,0.32); }
body.noir .sl-feature-card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
text-transform: none;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 10px;
line-height: 1.15;
}
body.noir .sl-feature-card p { font-size: 13.5px; line-height: 1.7; color: var(--text-2); margin: 0; }
/* ═══════════════════════════════════════════════════════════════════
8 · REVIEWS
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 18px;
}
body.noir .review-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
padding: 26px !important;
color: var(--text) !important;
will-change: transform;
transition: transform 0.32s var(--ease), border-color 0.25s ease !important;
}
body.noir .review-card:hover { transform: translateY(-4px); border-color: var(--line-strong) !important; }
body.noir .review-stars { color: var(--gold) !important; font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; text-shadow: 0 0 18px var(--gold-glow); }
body.noir .review-comment { font-size: 14.5px; line-height: 1.7; color: var(--text-2) !important; margin-bottom: 18px; font-style: normal; }
body.noir .review-footer { display: flex; justify-content: space-between; align-items: center; }
body.noir .review-author { font-weight: 700; font-size: 13.5px; color: var(--text) !important; }
body.noir .review-event { font-size: 11.5px; color: var(--accent) !important; margin-top: 2px; }
body.noir .review-date { font-size: 11.5px; color: var(--text-3) !important; }
/* Review form + login prompt (reviews page) */
body.noir #review-form-wrap > div {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.noir #review-form-wrap h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 21px !important;
color: var(--text) !important;
margin-bottom: 18px;
}
body.noir #review-error { color: var(--bad) !important; }
body.noir #login-prompt > div {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
color: var(--text) !important;
}
body.noir #login-prompt div[style*="color:rgba(0,0,0"] { color: var(--text-2) !important; }
body.noir .stars-input { display: flex; gap: 6px; }
body.noir .star-btn { font-size: 26px; cursor: pointer; color: rgba(255,255,255,0.16); transition: color 0.15s ease, transform 0.15s ease; line-height: 1; }
body.noir .star-btn:hover { transform: scale(1.15); }
body.noir .star-btn.active, body.noir .star-btn:hover { color: var(--gold); text-shadow: 0 0 16px var(--gold-glow); }
/* ═══════════════════════════════════════════════════════════════════
9 · STAT TILES + TEAM (about)
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.noir .sl-stat-tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
padding: 28px 22px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.3s var(--ease), border-color 0.25s ease;
}
body.noir .sl-stat-tile:hover { transform: translateY(-4px); border-color: var(--line-strong); }
body.noir .sl-stat-tile::before {
content: '';
position: absolute;
top: 0; left: 20%; right: 20%;
height: 1px;
}
body.noir .sl-stat-tile.sl-tile-sky::before { background: linear-gradient(90deg, transparent, rgba(42,169,224,0.8), transparent); box-shadow: 0 0 14px var(--accent-glow); }
body.noir .sl-stat-tile.sl-tile-yellow::before { background: linear-gradient(90deg, transparent, rgba(245,195,24,0.8), transparent); box-shadow: 0 0 14px var(--gold-glow); }
body.noir .sl-stat-tile.sl-tile-green::before { background: linear-gradient(90deg, transparent, rgba(74,222,128,0.8), transparent); box-shadow: 0 0 14px rgba(74,222,128,0.25); }
body.noir .sl-stat-tile.sl-tile-teal::before { background: linear-gradient(90deg, transparent, rgba(156,233,216,0.8), transparent); box-shadow: 0 0 14px rgba(156,233,216,0.25); }
body.noir .sl-stat-tile-num {
font-family: var(--font-display);
font-weight: 600;
font-size: 40px;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
}
body.noir .sl-stat-tile-label { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 8px; }
body.noir .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
body.noir .team-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
padding: 32px 20px;
text-align: center;
transition: transform 0.3s var(--ease), border-color 0.25s ease;
}
body.noir .team-card:hover { transform: translateY(-4px); border-color: var(--line-strong) !important; }
body.noir .team-avatar {
font-size: 30px;
width: 68px;
height: 68px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: var(--surface-2);
border: 1px solid var(--line);
}
body.noir .team-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; text-transform: none; color: var(--text); letter-spacing: -0.01em; }
body.noir .team-role { font-size: 11px; color: var(--accent); font-weight: 600; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.12em; }
/* About hero */
body.noir .about-hero {
background:
radial-gradient(60% 80% at 50% 0%, rgba(31,143,208,0.16) 0%, transparent 70%) !important;
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 96px 24px;
position: relative;
overflow: hidden;
color: var(--text);
}
body.noir .about-hero::before { display: none; }
body.noir .about-hero h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(40px, 6.4vw, 84px);
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--text);
margin: 0;
}
body.noir .about-hero h1 span {
background: linear-gradient(120deg, var(--accent) 0%, #8fdcff 60%, var(--gold) 130%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.noir .about-hero p { color: var(--text-2) !important; }
body.noir .about-hero .label-pill { background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important; }
/* Inline dark-text rescue inside dark sections */
body.noir .sl-section p[style*="color:rgba(0,0,0"] { color: var(--text-2) !important; }
body.noir .page-content p[style*="color:rgba(0,0,0"] { color: var(--text-2) !important; }
/* ═══════════════════════════════════════════════════════════════════
10 · CTA
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-cta-section {
background:
radial-gradient(55% 90% at 50% 110%, rgba(31,143,208,0.22) 0%, transparent 70%),
rgba(255,255,255,0.012);
border-top: 1px solid var(--line);
padding: 130px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
body.noir .sl-cta-section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(60% 70% at 50% 100%, #000 0%, transparent 100%);
mask-image: radial-gradient(60% 70% at 50% 100%, #000 0%, transparent 100%);
}
body.noir .sl-cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
body.noir .sl-cta-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(38px, 5.6vw, 72px);
text-transform: none;
letter-spacing: -0.03em;
color: var(--text);
margin: 16px 0 20px;
line-height: 1.0;
}
body.noir .sl-cta-sub { font-size: 16px; color: var(--text-2); max-width: 440px; margin: 0 auto 44px; line-height: 1.7; }
body.noir .sl-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════════════
11 · PARTNERS TICKER
═══════════════════════════════════════════════════════════════════ */
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.noir .sl-ticker-section { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.noir .sl-ticker-label {
text-align: center;
padding: 28px 24px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-3);
}
body.noir .sl-ticker-outer {
overflow: hidden;
padding: 10px 0 28px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
body.noir .sl-ticker-track {
display: flex;
align-items: center;
width: max-content;
animation: tickerScroll 32s linear infinite;
}
body.noir .sl-ticker-track:hover { animation-play-state: paused; }
body.noir .ticker-item {
display: flex;
align-items: center;
gap: 9px;
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-pill) !important;
padding: 9px 20px !important;
margin: 0 8px !important;
color: var(--text-2) !important;
font-size: 13px !important;
font-weight: 500 !important;
white-space: nowrap;
cursor: default;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.noir .ticker-item:hover { color: var(--text) !important; border-color: var(--line-strong) !important; background: var(--surface-2) !important; }
body.noir .ticker-item .t-emoji { font-size: 17px; line-height: 1; }
body.noir .ticker-item .t-name { font-family: var(--font-display); font-weight: 600; color: inherit; }
body.noir .ticker-item .t-cat { font-size: 11px; color: var(--text-3); }
body.noir .ticker-item.t-featured { border-color: rgba(245,195,24,0.4) !important; color: var(--gold) !important; }
body.noir .ticker-item.t-featured:hover { box-shadow: 0 0 24px var(--gold-glow); color: var(--gold) !important; }
/* ═══════════════════════════════════════════════════════════════════
12 · FOOTERS
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-footer { background: rgba(0,0,0,0.35); color: var(--text); padding: 80px 24px 0; border-top: 1px solid var(--line); }
body.noir .sl-footer-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
border-bottom: 1px solid var(--line);
}
body.noir .sl-footer-brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 30px;
text-transform: none;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 12px;
}
body.noir .sl-footer-arabic { font-family: var(--font-body); font-size: 15px; color: var(--gold); font-weight: 500; }
body.noir .sl-footer-tagline { font-size: 13.5px; color: var(--text-3); line-height: 1.7; max-width: 280px; }
body.noir .sl-footer-col-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 18px;
}
body.noir .sl-footer-link {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
margin-bottom: 11px;
transition: color 0.16s ease, transform 0.2s var(--ease);
}
body.noir .sl-footer-link:hover { color: var(--accent); transform: translateX(4px); }
body.noir .sl-footer-link { display: block; }
body.noir .sl-footer-bottom { max-width: 1140px; margin: 0 auto; padding: 24px 0; font-size: 12px; color: var(--text-3); }
/* Legacy footer (app pages) */
body.noir .footer { background: rgba(0,0,0,0.35); border-top: 1px solid var(--line); color: var(--text-3); }
body.noir .footer-brand { font-family: var(--font-display); color: var(--text); }
body.noir .footer-brand .gold { color: var(--gold); }
body.noir .footer-link { color: var(--text-2); }
body.noir .footer-link:hover { color: var(--accent); }
body.noir .footer-bottom { border-top: 1px solid var(--line); color: var(--text-3); }
body.noir .footer-col-title { color: var(--text-3); }
/* ═══════════════════════════════════════════════════════════════════
13 · INNER PAGE HEADERS + TABS
═══════════════════════════════════════════════════════════════════ */
body.noir .sl-page-header {
background:
radial-gradient(70% 120% at 20% -20%, rgba(31,143,208,0.16) 0%, transparent 65%);
padding: 72px 24px 72px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
body.noir .sl-page-header::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
background-size: 30px 30px;
-webkit-mask-image: radial-gradient(60% 90% at 25% 10%, #000 0%, transparent 100%);
mask-image: radial-gradient(60% 90% at 25% 10%, #000 0%, transparent 100%);
}
body.noir .sl-page-header-inner { max-width: 1140px; margin: 0 auto; position: relative; z-index: 2; }
body.noir .sl-page-header-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(40px, 5.8vw, 78px);
text-transform: none;
letter-spacing: -0.03em;
color: var(--text);
margin: 12px 0 14px;
line-height: 1.0;
}
body.noir .sl-page-header-sub { font-size: 15.5px; color: var(--text-2); line-height: 1.65; margin: 0; max-width: 560px; }
body.noir .sl-page-header-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
body.noir .sl-tab {
padding: 9px 22px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: var(--surface);
color: var(--text-2);
user-select: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.22s var(--ease);
}
body.noir .sl-tab:hover { transform: translateY(-1px); color: var(--text); border-color: rgba(42,169,224,0.4); }
body.noir .sl-tab.active { background: #fff; color: #07070c; border-color: #fff; }
body.noir .page-content { background: transparent !important; max-width: 1140px; margin: 0 auto; padding: 64px 24px 110px; }
/* ═══════════════════════════════════════════════════════════════════
14 · FORMS
═══════════════════════════════════════════════════════════════════ */
body.noir .form-group { margin-bottom: 20px; }
body.noir .form-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
display: block;
margin-bottom: 8px;
}
body.noir .form-input,
body.noir .form-select,
body.noir .form-textarea {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--r-input) !important;
padding: 12px 15px !important;
font-size: 14px;
font-family: var(--font-body);
color: var(--text) !important;
outline: none;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.noir .form-input::placeholder,
body.noir .form-textarea::placeholder { color: var(--text-3); }
body.noir .form-input:focus,
body.noir .form-select:focus,
body.noir .form-textarea:focus {
border-color: rgba(42,169,224,0.6) !important;
box-shadow: 0 0 0 3px rgba(42,169,224,0.14) !important;
background: rgba(255,255,255,0.06) !important;
}
body.noir .form-input[readonly] { background: rgba(255,255,255,0.025) !important; color: var(--text-2) !important; }
body.noir .form-select option { background: #101018; color: var(--text); }
body.noir .form-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
body.noir .form-error { color: var(--bad); }
/* ═══════════════════════════════════════════════════════════════════
15 · AUTH PAGE
═══════════════════════════════════════════════════════════════════ */
body.noir .auth-page {
min-height: 100dvh;
display: grid;
grid-template-columns: 1fr 1fr;
background: transparent;
}
body.noir .auth-left {
background:
radial-gradient(80% 60% at 20% 10%, rgba(31,143,208,0.18) 0%, transparent 70%),
rgba(0,0,0,0.3) !important;
border-right: 1px solid var(--line);
padding: 64px 56px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
body.noir .auth-left-brand {
font-family: var(--font-display) !important;
font-weight: 600;
font-size: 38px;
text-transform: none;
color: var(--text) !important;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
body.noir .auth-left-brand .gold { color: var(--gold) !important; }
body.noir .auth-left-tagline {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-3) !important;
margin-bottom: 52px;
}
body.noir .auth-left-feature {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
padding: 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
max-width: 360px;
width: 100%;
text-align: left;
transition: border-color 0.2s ease, transform 0.25s var(--ease);
}
body.noir .auth-left-feature:hover { border-color: var(--line-strong); transform: translateX(4px); }
body.noir .auth-right {
width: auto;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 32px;
}
body.noir .auth-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 26px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.5) !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
padding: 38px !important;
width: 100%;
max-width: 440px;
}
body.noir .auth-tabs {
display: flex;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 4px;
gap: 4px;
margin-bottom: 30px;
}
body.noir .auth-tab {
flex: 1;
text-align: center;
padding: 9px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: var(--r-pill);
color: var(--text-3);
background: transparent;
box-shadow: none;
transition: background 0.22s ease, color 0.22s ease;
}
body.noir .auth-tab.active { background: #fff; color: #07070c; }
body.noir .auth-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
text-transform: none;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 6px;
}
body.noir .auth-subtitle { font-size: 14px; color: var(--text-2); margin-bottom: 28px; }
body.noir .auth-footer { font-size: 13px; color: var(--text-3); margin-top: 22px; text-align: center; }
body.noir .auth-footer a { color: var(--accent) !important; font-weight: 600; }
@media (max-width: 760px) {
body.noir .auth-page { grid-template-columns: 1fr; }
body.noir .auth-left { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════
16 · BADGES / CHIPS / MISC SHARED
═══════════════════════════════════════════════════════════════════ */
body.noir .badge { border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }
body.noir .badge-default { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
body.noir .badge-blue { background: rgba(42,169,224,0.10); color: var(--accent); border: 1px solid rgba(42,169,224,0.35); }
body.noir .badge-gold { background: rgba(245,195,24,0.10); color: var(--gold); border: 1px solid rgba(245,195,24,0.35); }
body.noir .badge-green, body.noir .badge-sent, body.noir .badge-used { background: rgba(74,222,128,0.10); color: var(--ok); border: 1px solid rgba(74,222,128,0.32); }
body.noir .badge-red, body.noir .badge-error { background: rgba(255,99,99,0.10); color: var(--bad); border: 1px solid rgba(255,99,99,0.32); }
body.noir .badge-warning { background: rgba(251,191,36,0.10); color: var(--warn); border: 1px solid rgba(251,191,36,0.32); }
body.noir .badge-generated { background: rgba(42,169,224,0.10); color: var(--accent); border: 1px solid rgba(42,169,224,0.35); }
body.noir .label-pill {
background: var(--surface);
color: var(--text-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
body.noir .stat-chip { background: var(--surface); border: 1px solid var(--line); color: var(--text-2); border-radius: 14px; }
body.noir .stat-chip strong { color: var(--accent); font-family: var(--font-display); font-weight: 600; }
body.noir .breadcrumb { color: var(--text-3); }
body.noir .breadcrumb a { color: var(--text-2) !important; transition: color 0.15s ease; }
body.noir .breadcrumb a:hover { color: var(--accent) !important; }
body.noir .page-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
body.noir .page-meta { color: var(--text-2); }
body.noir code {
background: rgba(255,255,255,0.07) !important;
border: 1px solid var(--line) !important;
border-radius: 6px !important;
color: var(--accent) !important;
}
body.noir .empty-state { text-align: center; padding: 72px 24px; color: var(--text-3); }
body.noir .empty-state h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-2); text-transform: none; }
body.noir .empty-state p { color: var(--text-3); }
body.noir .spinner { border-color: rgba(255,255,255,0.14); border-top-color: var(--accent); }
body.noir .spinner-white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; }
body.noir .loading-shimmer {
background: linear-gradient(90deg, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.035) 75%) !important;
background-size: 200% 100% !important;
border: 1px solid var(--line);
animation: shimmer 1.5s ease-in-out infinite !important;
}
body.noir .progress-bar-wrap { background: rgba(255,255,255,0.07); border-radius: var(--r-pill); overflow: hidden; }
body.noir .progress-bar { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); border-radius: var(--r-pill); }
body.noir .progress-bar.near { background: linear-gradient(90deg, #d97706, var(--warn)); box-shadow: 0 0 12px rgba(251,191,36,0.3); }
body.noir .progress-bar.full { background: linear-gradient(90deg, #dc2626, var(--bad)); box-shadow: 0 0 12px rgba(255,125,125,0.3); }
/* ═══════════════════════════════════════════════════════════════════
17 · TABLES
═══════════════════════════════════════════════════════════════════ */
body.noir .table-wrap { border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; background: rgba(255,255,255,0.012); }
body.noir thead { background: rgba(255,255,255,0.03); }
body.noir th {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-3);
border-bottom: 1px solid var(--line);
}
body.noir td { border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-2); }
body.noir tr:last-child td { border-bottom: none; }
body.noir tr:hover td { background: rgba(255,255,255,0.025); }
body.noir .td-name { color: var(--text); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════════
18 · MODALS + TOASTS
═══════════════════════════════════════════════════════════════════ */
body.noir .modal-backdrop {
background: rgba(0,0,0,0.66);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
body.noir .modal {
background: rgba(17,17,24,0.92);
-webkit-backdrop-filter: blur(24px) saturate(1.3);
backdrop-filter: blur(24px) saturate(1.3);
border: 1px solid var(--line-strong);
border-radius: 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 40px 100px rgba(0,0,0,0.7);
color: var(--text);
}
body.noir .modal-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--text); text-transform: none; }
body.noir .modal-close {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--text-2);
transition: background 0.2s ease, color 0.2s ease, transform 0.25s var(--ease);
}
body.noir .modal-close:hover { background: #fff; color: #07070c; transform: rotate(90deg) scale(1.08); }
body.noir .modal-header { border-bottom: none; }
body.noir #modal-error { background: rgba(255,99,99,0.10) !important; border: 1px solid rgba(255,99,99,0.35) !important; color: var(--bad) !important; border-radius: 12px !important; }
body.noir .modal-wide { max-width: 680px; }
body.noir .delete-modal-icon { filter: drop-shadow(0 0 22px rgba(255,99,99,0.3)); }
body.noir .toast {
background: rgba(17,17,24,0.94);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid var(--line-strong);
border-left: 3px solid var(--accent);
border-radius: 14px;
color: var(--text);
box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
body.noir .toast.success { border-left-color: var(--ok); }
body.noir .toast.error { border-left-color: var(--bad); }
body.noir .toast.info { border-left-color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════
19 · CHECKOUT
═══════════════════════════════════════════════════════════════════ */
body.noir .checkout-section-title { border-bottom: 1px solid var(--line); color: var(--text); font-family: var(--font-display); font-weight: 600; }
body.noir .payment-tab {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 16px;
color: var(--text-2);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s var(--ease);
}
body.noir .payment-tab:hover { border-color: rgba(42,169,224,0.5); color: var(--text); transform: translateY(-1px); }
body.noir .payment-tab.active {
border-color: var(--accent);
color: var(--accent);
background: rgba(42,169,224,0.08);
box-shadow: 0 0 0 3px rgba(42,169,224,0.10);
}
body.noir .order-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
}
body.noir .order-card-header {
background:
radial-gradient(120% 160% at 0% 0%, rgba(42,169,224,0.22) 0%, transparent 60%),
rgba(255,255,255,0.02);
border-bottom: 1px solid var(--line);
color: var(--text);
}
body.noir .order-card-event { font-family: var(--font-display); font-weight: 600; }
body.noir .order-row { color: var(--text-2); border-bottom: 1px solid rgba(255,255,255,0.05); }
body.noir .order-row strong { color: var(--text); }
body.noir .order-total { background: rgba(42,169,224,0.06); border-top: 1px solid rgba(42,169,224,0.2); color: var(--text); }
body.noir .order-total .amount { color: var(--accent); font-family: var(--font-display); font-weight: 600; text-shadow: 0 0 24px var(--accent-glow); }
body.noir .instapay-info { background: rgba(245,195,24,0.06); border: 1px solid rgba(245,195,24,0.3); border-radius: 14px; }
body.noir .instapay-account { color: var(--gold); font-family: var(--font-display); font-weight: 600; }
body.noir .card-brand-icon { filter: grayscale(0.2); }
/* ═══════════════════════════════════════════════════════════════════
20 · BOOKINGS
═══════════════════════════════════════════════════════════════════ */
body.noir .booking-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
overflow: hidden;
transition: transform 0.3s var(--ease), border-color 0.25s ease, box-shadow 0.3s ease;
}
body.noir .booking-card:hover {
transform: translateY(-4px);
border-color: rgba(42,169,224,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.45);
}
body.noir .booking-card-header { border-bottom: 1px solid var(--line); }
body.noir .booking-card-event { font-family: var(--font-display); font-weight: 600; }
body.noir .booking-meta-row { color: var(--text-2); }
body.noir .booking-actions { border-top: 1px solid var(--line); }
/* ═══════════════════════════════════════════════════════════════════
21 · INVOICE — white paper island on dark stage
═══════════════════════════════════════════════════════════════════ */
body.noir .invoice-page { background: transparent; }
body.noir .invoice-card {
/* document stays light — re-scope text vars back to dark inside */
--color-midnight-ink: #0c0e13;
--color-graphite: #333a45;
--color-slate: #5d6675;
--color-ash: #939baa;
--color-rihla-blue: #1b87c0;
background: #fdfdfe;
border-radius: 24px;
box-shadow: 0 40px 120px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08);
}
body.noir .invoice-header {
background:
radial-gradient(130% 180% at 0% 0%, #14304d 0%, #0a1018 70%);
color: #fff;
}
body.noir .invoice-brand { font-family: var(--font-display); font-weight: 600; }
body.noir .invoice-qr-img { background: #fff; border: 3px solid #0c0e13; }
body.noir .invoice-footer { background: rgba(0,0,0,0.03); color: #939baa; }
/* The base stylesheet hardcodes #fff for these (dark-card era) — on the noir
light "paper" card they rendered white-on-white. Re-ink them dark. */
body.noir .invoice-event-title { color: #0c0e13; }
body.noir .invoice-info-item span { color: #1f2430; }
body.noir .invoice-divider { border-top-color: rgba(0,0,0,0.14); }
/* Ghost buttons inside the light card use the site-wide dark-theme text
variables → light-on-light. Give them proper light-surface styling. */
body.noir .invoice-card .btn-ghost-dark {
background: #eef2f6;
color: #21262f;
border: 1px solid #d5dbe3;
}
body.noir .invoice-card .btn-ghost-dark:hover { background: #e3e9f0; border-color: #b9c3cf; }
/* ═══════════════════════════════════════════════════════════════════
22 · VERIFY
═══════════════════════════════════════════════════════════════════ */
body.noir .verify-page { background: transparent; }
body.noir .verify-card {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 26px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 100px rgba(0,0,0,0.6);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
color: var(--text);
}
body.noir .verify-title { font-family: var(--font-display); font-weight: 600; color: var(--text); text-transform: none; }
body.noir .verify-title.success { color: var(--ok); text-shadow: 0 0 30px rgba(74,222,128,0.3); }
body.noir .verify-title.used { color: var(--bad); text-shadow: 0 0 30px rgba(255,125,125,0.3); }
body.noir .verify-sub { color: var(--text-2); }
body.noir .verify-meta { background: rgba(42,169,224,0.06); border: 1px solid rgba(42,169,224,0.22); border-radius: 16px; }
body.noir .verify-meta-row { color: var(--text-2); }
body.noir .verify-meta-row strong { color: var(--text); }
/* ═══════════════════════════════════════════════════════════════════
23 · STAFF SCANNER + SCAN + QR VIEW
═══════════════════════════════════════════════════════════════════ */
body.noir .staff-page { background: transparent; color: var(--text); }
body.noir .staff-header { border-bottom: 1px solid var(--line); }
body.noir .staff-brand { font-family: var(--font-display); font-weight: 600; color: var(--text); display: flex; align-items: center; }
body.noir .staff-brand::before {
content: '';
width: 24px;
height: 24px;
background: url('/img/logo.svg') center / contain no-repeat;
display: inline-block;
margin-right: 8px;
flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(42,169,224,0.3));
}
body.noir .staff-brand .gold { color: var(--gold); }
body.noir .scanner-box {
border: 1px solid var(--line-strong);
border-radius: 24px;
background: #000;
box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
body.noir .scan-finder {
border: 2px solid var(--accent);
border-radius: 18px;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.22), 0 0 30px var(--accent-glow);
}
body.noir .scan-result { border-radius: 18px; }
body.noir .scan-result.success { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.32); }
body.noir .scan-result.error { background: rgba(255,99,99,0.08); border: 1px solid rgba(255,99,99,0.32); }
body.noir .scan-result.warning { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.32); }
body.noir .scan-result-title { font-family: var(--font-display); font-weight: 600; color: var(--text); text-transform: none; }
body.noir .scan-result-sub { color: var(--text-2); }
body.noir .scan-history { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
body.noir .scan-history-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
body.noir .scan-wrap { max-width: 520px; margin: 0 auto; padding: 40px 24px 90px; }
body.noir .qr-view-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
body.noir .qr-view-card {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 26px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 100px rgba(0,0,0,0.6);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
padding: 36px 30px;
text-align: center;
max-width: 420px;
width: 100%;
}
body.noir .qr-view-event { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text); margin-bottom: 8px; }
body.noir .qr-view-name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--accent); margin-bottom: 16px; }
body.noir .qr-view-img { background: #fff; border-radius: 18px; padding: 10px; width: 220px; height: 220px; margin: 0 auto 8px; display: block; }
body.noir .qr-warning {
background: rgba(245,195,24,0.07);
border: 1px solid rgba(245,195,24,0.3);
border-radius: 12px;
padding: 12px 16px;
font-size: 12.5px;
color: var(--text-2);
text-align: left;
margin-top: 14px;
}
body.noir .invoice-warning { background: rgba(245,195,24,0.08); border: 1px solid rgba(245,195,24,0.35); color: #7a5e00; }
/* ═══════════════════════════════════════════════════════════════════
25 · PAYMENT VERIFICATION
═══════════════════════════════════════════════════════════════════ */
/* Sidebar pending badge */
body.noir .pending-badge {
display: inline-flex; align-items: center; justify-content: center;
background: #ef4444; color: #fff;
font-size: 10px; font-weight: 700;
min-width: 18px; height: 18px; border-radius: 999px;
padding: 0 5px; margin-left: 6px;
animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
/* Filter tabs */
body.noir .pv-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
body.noir .pv-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 18px; border-radius: var(--r-pill);
font-size: 13px; font-weight: 600; cursor: pointer;
background: var(--surface); border: 1px solid var(--line);
color: var(--text-2); transition: all 0.2s ease;
}
body.noir .pv-tab:hover { border-color: var(--line-strong); color: var(--text); }
body.noir .pv-tab.active { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
body.noir .pv-cnt {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; border-radius: 999px; padding: 0 5px;
font-size: 11px; font-weight: 700;
background: rgba(255,255,255,0.08); color: var(--text-2);
}
body.noir .pv-cnt.ok { background: rgba(74,222,128,0.15); color: #4ade80; }
body.noir .pv-cnt.bad { background: rgba(239,68,68,0.15); color: #f87171; }
/* Payment review card */
body.noir .pv-card {
display: flex; gap: 18px; align-items: flex-start;
background: var(--surface); border: 1px solid var(--line);
border-radius: 18px; padding: 18px; margin-bottom: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
transition: border-color 0.2s ease;
}
body.noir .pv-card:hover { border-color: var(--line-strong); }
body.noir .pv-card-left { flex-shrink: 0; }
body.noir .pv-screenshot-thumb {
width: 100px; height: 100px; object-fit: cover;
border-radius: 12px; cursor: zoom-in;
border: 1px solid var(--line);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: block;
}
body.noir .pv-screenshot-thumb:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
body.noir .pv-no-screenshot {
width: 100px; height: 100px; border-radius: 12px;
border: 1px dashed var(--line-strong);
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.4;
}
body.noir .pv-card-body { flex: 1; min-width: 0; }
body.noir .pv-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
body.noir .pv-invoice { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: 0.06em; margin-bottom: 4px; font-family: monospace; }
body.noir .pv-holder { font-size: 15px; font-weight: 600; color: var(--text); }
body.noir .pv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
body.noir .pv-ref { font-size: 12px; color: var(--text-3); font-family: monospace; margin-bottom: 10px; }
body.noir .pv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Screenshot lightbox */
body.noir .pv-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.92); backdrop-filter: blur(12px) saturate(1.2);
display: flex; align-items: center; justify-content: center;
cursor: zoom-out;
}
body.noir .pv-lightbox img {
max-width: 90vw; max-height: 90vh;
border-radius: 16px; object-fit: contain;
box-shadow: 0 40px 120px rgba(0,0,0,0.8);
cursor: default;
}
body.noir .pv-lightbox-close {
position: absolute; top: 20px; right: 24px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
color: #fff; width: 40px; height: 40px; border-radius: 999px;
font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease;
}
body.noir .pv-lightbox-close:hover { background: rgba(255,255,255,0.2); }
/* Screenshot upload zone (checkout page) */
body.noir .screenshot-upload-zone {
border: 2px dashed var(--line-strong);
border-radius: 14px; padding: 20px 16px;
text-align: center; cursor: pointer;
background: rgba(255,255,255,0.02);
transition: border-color 0.2s ease, background 0.2s ease;
min-height: 100px; display: flex; align-items: center; justify-content: center;
}
body.noir .screenshot-upload-zone:hover { border-color: var(--accent); background: rgba(42,169,224,0.04); }
body.noir .screenshot-upload-zone.has-file { border-color: rgba(74,222,128,0.5); background: rgba(74,222,128,0.04); border-style: solid; }
/* Payment pending banner (invoice page) */
body.noir .payment-pending-banner {
background: rgba(245,195,24,0.07);
border: 1px solid rgba(245,195,24,0.28);
border-radius: 16px; padding: 28px 24px;
text-align: center; margin-bottom: 0;
}
body.noir .payment-pending-banner .ppb-icon { font-size: 48px; margin-bottom: 12px; }
body.noir .payment-pending-banner h3 {
font-family: var(--font-display); font-size: 20px; font-weight: 600;
color: var(--gold); margin-bottom: 8px;
}
body.noir .payment-pending-banner p { color: var(--text-2); font-size: 14px; margin: 0 0 6px; line-height: 1.6; }
/* ── Seating editor mode buttons ─────────────────────────────────────────── */
body.noir .mode-btn {
width: 100%; text-align: left;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--color-slate); border-radius: 8px;
padding: 8px 12px; font-size: 13px; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
body.noir .mode-btn:hover { background: rgba(255,255,255,0.08); color: var(--color-text); }
body.noir .mode-btn.active {
background: rgba(43,164,216,0.15);
border-color: rgba(43,164,216,0.4);
color: #2ba4d8; font-weight: 600;
}
body.noir .mode-btn.btn-danger { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); color: #ef4444; }
body.noir .mode-btn.btn-danger:hover,
body.noir .mode-btn.btn-danger.active { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); }
/* ═══════════════════════════════════════════════════════════════════
24 · DASHBOARD / EVENT (organizer surface)
═══════════════════════════════════════════════════════════════════ */
body.noir .card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
transition: transform 0.3s var(--ease), border-color 0.25s ease, box-shadow 0.3s ease;
}
body.noir .card:hover {
transform: translateY(-4px);
border-color: var(--line-strong);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.45);
}
body.noir .event-card-header {
height: 112px;
display: flex;
align-items: center;
justify-content: center;
font-size: 46px;
border-bottom: 1px solid var(--line);
background: linear-gradient(150deg, #101a2c 0%, #0a0e19 100%);
text-shadow: 0 0 32px rgba(42,169,224,0.4);
}
body.noir .theme-default { background: linear-gradient(150deg, #101a2c, #0a0e19); }
body.noir .theme-birthday { background: linear-gradient(150deg, #2a1430, #120816); }
body.noir .theme-party { background: linear-gradient(150deg, #131f3a, #0a0d18); }
body.noir .theme-dinner { background: linear-gradient(150deg, #2a1d10, #140d06); }
body.noir .theme-grad { background: linear-gradient(150deg, #0f2430, #081116); }
body.noir .theme-wedding { background: linear-gradient(150deg, #2b1822, #140a10); }
body.noir .theme-holiday { background: linear-gradient(150deg, #102516, #08120b); }
body.noir .theme-summer { background: linear-gradient(150deg, #2a2410, #131006); }
body.noir .theme-concert { background: linear-gradient(150deg, #1c1330, #0d0816); }
body.noir .event-card-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
body.noir .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
body.noir .emoji-option {
font-size: 20px;
padding: 8px 0;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line);
cursor: pointer;
text-align: center;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.2s var(--ease);
}
body.noir .emoji-option:hover { transform: translateY(-1px); border-color: var(--line-strong); }
body.noir .emoji-option.selected { border-color: var(--accent); background: rgba(42,169,224,0.10); box-shadow: 0 0 0 3px rgba(42,169,224,0.12); }
body.noir .theme-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
body.noir .theme-option {
height: 36px;
border-radius: 10px;
border: 1px solid var(--line);
cursor: pointer;
transition: border-color 0.18s ease, transform 0.2s var(--ease);
}
body.noir .theme-option:hover { transform: translateY(-1px); }
body.noir .theme-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,169,224,0.14); }
body.noir .qr-modal-img { background: #fff; border-radius: 16px; padding: 8px; width: 200px; height: 200px; margin: 0 auto 16px; display: block; }
body.noir .qr-modal-actions { display: flex; gap: 8px; justify-content: center; }
body.noir #page-header { border-bottom-color: var(--line) !important; }
/* ═══════════════════════════════════════════════════════════════════
25 · ADMIN — Linear-style dark
═══════════════════════════════════════════════════════════════════ */
body.noir .admin-layout { background: transparent; }
body.noir .admin-sidebar {
background: rgba(5,5,9,0.85) !important;
border-right: 1px solid var(--line) !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
body.noir .admin-sidebar-logo { border-bottom: 1px solid var(--line) !important; }
body.noir .admin-sidebar-logo .brand {
font-size: 0 !important; /* hide the text wordmark — the logo image carries it */
display: flex;
align-items: center;
}
body.noir .admin-sidebar-logo .brand::before {
content: '';
width: 116px;
height: 32px;
background: url('/brand/rihla-logo.png') left center / contain no-repeat;
display: inline-block;
flex-shrink: 0;
}
body.noir .admin-sidebar-logo .brand .gold { color: var(--gold) !important; }
body.noir .role-badge {
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-3) !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin-top: 4px;
}
body.noir .admin-nav { padding: 16px 12px !important; }
body.noir .admin-nav-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--text-3) !important;
padding: 10px 10px 4px !important;
}
body.noir .admin-nav-link {
color: var(--text-2) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
padding: 9px 12px !important;
border-radius: 12px !important;
margin-bottom: 2px !important;
display: flex;
border-left: none !important;
background: none !important;
transition: background 0.2s ease, color 0.2s ease, transform 0.22s var(--ease) !important;
}
body.noir .admin-nav-link:hover { background: var(--surface-2) !important; color: var(--text) !important; transform: translateX(3px); }
body.noir .admin-nav-link.active {
background: rgba(42,169,224,0.12) !important;
color: var(--accent) !important;
box-shadow: inset 0 0 0 1px rgba(42,169,224,0.25);
transform: none !important;
}
body.noir .admin-sidebar-footer { border-top: 1px solid var(--line) !important; }
body.noir .admin-main { background: transparent !important; }
body.noir .admin-topbar {
background: rgba(8,8,13,0.7) !important;
border-bottom: 1px solid var(--line) !important;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: none !important;
}
body.noir .admin-topbar-title {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 19px !important;
color: var(--text) !important;
text-transform: none;
}
body.noir .admin-stat-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
position: relative;
overflow: hidden;
transition: transform 0.3s var(--ease), border-color 0.25s ease !important;
}
body.noir .admin-stat-card:hover { transform: translateY(-3px); border-color: var(--line-strong) !important; }
body.noir .admin-stat-label { color: var(--text-3) !important; font-weight: 600 !important; letter-spacing: 0.12em !important; }
body.noir .admin-stat-value {
font-family: var(--font-display) !important;
font-weight: 600 !important;
color: var(--text) !important;
letter-spacing: -0.02em !important;
}
body.noir .admin-stat-sub { color: var(--text-3) !important; }
body.noir .admin-stat-card.blue .admin-stat-value { color: var(--accent) !important; text-shadow: 0 0 26px var(--accent-glow); }
body.noir .admin-stat-card.gold .admin-stat-value { color: var(--gold) !important; text-shadow: 0 0 26px var(--gold-glow); }
body.noir .admin-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 18px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.noir .admin-card-header { border-bottom: 1px solid var(--line) !important; background: transparent !important; }
body.noir .admin-card-title {
font-family: var(--font-display) !important;
font-weight: 600 !important;
color: var(--text) !important;
text-transform: none;
}
body.noir .admin-partner-stat {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
body.noir .admin-partner-stat-label { color: var(--text-3) !important; }
body.noir .admin-partner-stat-value { font-family: var(--font-display) !important; font-weight: 600 !important; color: var(--text) !important; }
body.noir .admin-partner-stat.blue .admin-partner-stat-value { color: var(--accent) !important; }
body.noir .admin-partner-stat.gold .admin-partner-stat-value { color: var(--gold) !important; }
body.noir .admin-partner-stat.green .admin-partner-stat-value { color: var(--ok) !important; }
body.noir .admin-partner-stat.red .admin-partner-stat-value { color: var(--bad) !important; }
body.noir .admin-partner-stat-sub { color: var(--text-3) !important; }
body.noir .partner-table-logo { background: var(--surface-2); border: 1px solid var(--line); }
body.noir .partner-table-info strong { color: var(--text); }
body.noir .partner-table-info span { color: var(--text-3); }
body.noir .ticket-type-row { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
body.noir .benefit-row input {
background: rgba(255,255,255,0.04);
border: 1px solid var(--line-strong);
border-radius: 10px;
color: var(--text);
}
body.noir .benefit-row input:focus { border-color: rgba(42,169,224,0.55); }
body.noir .benefit-remove { background: rgba(255,99,99,0.10); color: var(--bad); border-radius: 10px; }
body.noir .benefit-remove:hover { background: rgba(255,99,99,0.2); }
body.noir .add-benefit-btn {
color: var(--accent);
background: rgba(42,169,224,0.07);
border: 1px dashed rgba(42,169,224,0.4);
border-radius: 10px;
}
body.noir .add-benefit-btn:hover { background: rgba(42,169,224,0.13); }
body.noir .upload-label { border: 1px dashed var(--line-strong); color: var(--text-3); border-radius: 12px; }
body.noir .upload-label:hover { border-color: rgba(42,169,224,0.5); color: var(--accent); }
body.noir .toggle-track { background: rgba(255,255,255,0.14); }
body.noir .toggle-switch input:checked + .toggle-track { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
body.noir .toggle-label { color: var(--text-2); }
/* ═══════════════════════════════════════════════════════════════════
26 · PARTNERSHIPS PAGE
═══════════════════════════════════════════════════════════════════ */
body.noir #hero-stats .partner-stat-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: 18px !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform 0.3s var(--ease), border-color 0.25s ease;
}
body.noir #hero-stats .partner-stat-card:hover { transform: translateY(-3px); border-color: var(--line-strong) !important; }
body.noir #hero-stats .partner-stat-num {
font-family: var(--font-display) !important;
font-weight: 600;
color: var(--text) !important;
}
body.noir #hero-stats .partner-stat-label { color: var(--text-3) !important; }
body.noir .partner-filter-section {
background: rgba(8,8,13,0.72);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
backdrop-filter: blur(20px) saturate(1.3);
border-bottom: 1px solid var(--line);
box-shadow: none;
position: sticky;
top: 0;
z-index: 30;
padding: 16px 24px;
}
body.noir .partner-filter-bar { max-width: 1140px; margin: 0 auto; }
body.noir .partner-search {
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--r-pill) !important;
color: var(--text) !important;
}
body.noir .partner-search::placeholder { color: var(--text-3); }
body.noir .partner-search:focus { border-color: rgba(42,169,224,0.55) !important; box-shadow: 0 0 0 3px rgba(42,169,224,0.12) !important; background: rgba(255,255,255,0.06) !important; }
body.noir .search-icon { opacity: 0.6; }
body.noir .filter-pill {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
color: var(--text-2);
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.22s var(--ease);
}
body.noir .filter-pill:hover { color: var(--text); border-color: rgba(42,169,224,0.4); background: var(--surface-2); transform: translateY(-1px); }
body.noir .filter-pill.active { background: #fff; color: #07070c; border-color: #fff; }
body.noir .sort-select {
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--r-pill) !important;
color: var(--text) !important;
}
body.noir .sort-select option { background: #101018; color: var(--text); }
body.noir .partner-grid-section { background: transparent; padding: 56px 24px 100px; }
body.noir .partners-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
body.noir .partner-skeleton {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
height: 300px;
overflow: hidden;
position: relative;
}
body.noir .partner-skeleton::before,
body.noir .partner-skeleton::after { display: none; }
body.noir .partner-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
overflow: hidden;
opacity: 0;
transform: translateY(28px);
position: relative;
will-change: transform;
}
body.noir .partner-card.visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.55s ease, transform 0.55s var(--ease), border-color 0.25s ease, box-shadow 0.34s ease;
}
body.noir .partner-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(42,169,224,0.34) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.5) !important;
}
body.noir .partner-card.featured {
border: 1px solid transparent !important;
background:
linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
linear-gradient(135deg, rgba(245,195,24,0.75), rgba(245,195,24,0.10) 55%, rgba(245,195,24,0.5)) border-box !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 44px rgba(245,195,24,0.07) !important;
animation: none;
}
body.noir .partner-card-banner { border-bottom: 1px solid var(--line); height: 130px; width: 100%; object-fit: cover; }
body.noir .partner-card-banner-placeholder {
background:
radial-gradient(70% 110% at 30% 0%, rgba(42,169,224,0.14) 0%, transparent 60%),
linear-gradient(150deg, #101a2c 0%, #0a0e19 100%);
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-size: 46px;
border-bottom: 1px solid var(--line);
text-shadow: 0 0 32px rgba(42,169,224,0.4);
}
body.noir .partner-card-body { padding: 20px; }
body.noir .partner-card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
body.noir .partner-logo-wrap {
width: 48px;
height: 48px;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
overflow: hidden;
}
body.noir .partner-card-category {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 4px;
}
body.noir .partner-card-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
text-transform: none;
letter-spacing: -0.01em;
color: var(--text);
line-height: 1.12;
}
body.noir .featured-badge {
display: inline-flex;
background: rgba(245,195,24,0.12);
color: var(--gold);
border: 1px solid rgba(245,195,24,0.4);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--r-pill);
margin-top: 6px;
}
body.noir .partner-card-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 10px 0 12px; }
body.noir .partner-benefits { padding: 0; margin: 0 0 8px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
body.noir .partner-benefit { font-size: 12.5px; color: var(--text-2); padding-left: 18px; position: relative; }
body.noir .partner-benefit::before { content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--accent); }
body.noir .partner-card-footer { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.015); }
body.noir .partner-empty { grid-column: 1/-1; text-align: center; padding: 90px 24px; }
body.noir .partner-empty-icon { font-size: 52px; margin-bottom: 18px; filter: grayscale(0.4); }
body.noir .partner-empty h3 { font-family: var(--font-display); font-weight: 600; font-size: 26px; text-transform: none; color: var(--text-2); margin-bottom: 8px; }
body.noir .partner-empty p { font-size: 14px; color: var(--text-3); margin-bottom: 26px; }
/* ═══════════════════════════════════════════════════════════════════
27 · EVENT DETAIL
═══════════════════════════════════════════════════════════════════ */
body.noir .event-detail-hero {
background:
radial-gradient(70% 130% at 15% -20%, rgba(31,143,208,0.20) 0%, transparent 65%) !important;
border-bottom: 1px solid var(--line);
padding: 64px 24px 72px;
position: relative;
overflow: hidden;
color: var(--text);
}
body.noir .event-detail-hero::before { display: none !important; }
body.noir .event-detail-hero-content { max-width: 1140px; margin: 0 auto; position: relative; z-index: 2; padding: 0; }
body.noir .event-detail-genre {
display: inline-flex;
background: rgba(42,169,224,0.10);
border: 1px solid rgba(42,169,224,0.35);
color: var(--accent);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: var(--r-pill);
margin-bottom: 18px;
}
body.noir .event-detail-title {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: clamp(36px, 5.4vw, 72px) !important;
text-transform: none;
letter-spacing: -0.03em;
color: var(--text) !important;
line-height: 1.0;
margin-bottom: 10px;
}
body.noir .event-detail-arabic { font-size: 20px; color: var(--gold); margin-bottom: 16px; direction: rtl; }
body.noir .event-detail-meta-row { font-size: 15px; color: var(--text-2); font-weight: 500; margin-bottom: 8px; }
body.noir #event-details h2[style],
body.noir #event-details h3[style] { color: var(--text) !important; font-family: var(--font-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.015em !important; }
body.noir #event-details p[style*="color:rgba(0,0,0"] { color: var(--text-2) !important; }
body.noir .ticket-picker {
background: var(--surface) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--r-card) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.5) !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
padding: 26px !important;
max-width: 380px;
min-width: 300px;
position: sticky;
top: 96px;
}
body.noir .ticket-picker h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
font-size: 20px !important;
text-transform: none;
color: var(--text) !important;
}
body.noir .ticket-type-option {
background: rgba(255,255,255,0.03) !important;
border: 1px solid var(--line-strong) !important;
border-radius: 14px !important;
padding: 14px 16px !important;
margin-bottom: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.22s var(--ease) !important;
}
body.noir .ticket-type-option:not(.sold-out):hover { transform: translateX(4px); border-color: rgba(42,169,224,0.45) !important; }
body.noir .ticket-type-option.selected {
background: rgba(42,169,224,0.10) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(42,169,224,0.12);
}
body.noir .ticket-type-option.sold-out { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
body.noir .ticket-type-name { font-weight: 600; font-size: 14.5px; color: var(--text); }
body.noir .ticket-type-option.selected .ticket-type-name { color: var(--text) !important; }
body.noir .ticket-type-avail { font-size: 12px; color: var(--text-3); margin-top: 2px; }
body.noir .ticket-type-option.selected .ticket-type-avail { color: var(--text-2) !important; }
body.noir .ticket-type-price { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); }
body.noir .ticket-type-option.selected .ticket-type-price { color: var(--accent) !important; }
body.noir .ticket-type-price span { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--text-3); }
body.noir .qty-picker { display: flex; align-items: center; gap: 14px; margin-top: 8px; background: transparent; padding: 0; }
body.noir .qty-btn {
width: 38px;
height: 38px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--surface);
color: var(--text);
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.noir .qty-btn:hover { background: #fff; color: #07070c; }
body.noir .qty-btn:active { transform: scale(0.86); }
body.noir .qty-num { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text); min-width: 36px; text-align: center; }
/* keep the light "ticket stub" total box readable */
body.noir #ticket-picker div[style*="--sl-sky"] { color: #0b0d12; }
body.noir #total-price { color: #0b0d12 !important; }
body.noir #sold-out-card {
background: var(--surface) !important;
border: 1px solid var(--line) !important;
border-radius: var(--r-card) !important;
color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════════
28 · SECTION OVERRIDES (legacy .section on inner pages)
═══════════════════════════════════════════════════════════════════ */
body.noir .section { background: transparent !important; }
body.noir .section.section-blue-gradient { background: rgba(255,255,255,0.016) !important; }
body.noir .section-dark { background: rgba(0,0,0,0.3); }
body.noir .section-title { color: var(--text); font-family: var(--font-display); font-weight: 600; }
body.noir .section-subtitle { color: var(--text-2); }
/* ═══════════════════════════════════════════════════════════════════
29 · RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
body.noir .sl-hero { min-height: auto; padding: 72px 20px 88px; }
body.noir .sl-hero-actions { margin-bottom: 52px; }
body.noir .sl-hero-stats > div { padding-right: 36px; }
}
@media (max-width: 768px) {
body.noir .sl-nav-links { display: none; }
body.noir .sl-footer-inner { grid-template-columns: 1fr 1fr; }
body.noir .sl-section { padding: 80px 20px; }
body.noir .sl-cta-section { padding: 96px 20px; }
body.noir .partner-filter-bar { flex-direction: column; align-items: stretch; }
body.noir .emoji-grid, body.noir .theme-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 520px) {
body.noir .sl-footer-inner { grid-template-columns: 1fr; }
body.noir .sl-stat-grid { grid-template-columns: 1fr; }
body.noir .sl-hero-title { font-size: clamp(44px, 13vw, 64px); }
body.noir .ticket-picker { position: static; max-width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
30 · REDUCED MOTION
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
body.noir .sl-marquee-track,
body.noir .sl-ticker-track,
body.noir .sl-hero::before,
body.noir .sl-hero-label::before { animation: none !important; }
body.noir * { transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════════
31 · AUTH & ADMIN — NOIR POLISH PASS
═══════════════════════════════════════════════════════════════════ */
/* Auth card — upgraded to spec */
body.noir .auth-card {
background: var(--surface-2) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--r-card) !important;
-webkit-backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
}
/* Auth tab — accent filled pill */
body.noir .auth-tab.active {
background: var(--accent) !important;
color: var(--accent-ink) !important;
}
/* Auth left — logo before brand */
body.noir .auth-left-brand {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
body.noir .auth-left-brand::before {
content: '';
width: 52px;
height: 52px;
background: url('/img/logo.svg') center / contain no-repeat;
display: block;
margin-bottom: 18px;
filter: drop-shadow(0 0 22px rgba(42,169,224,0.45));
}
/* Auth feature icon chip */
body.noir .auth-feature-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 14px;
background: rgba(42,169,224,0.08);
border: 1px solid rgba(42,169,224,0.22);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
transition: background 0.2s ease, border-color 0.2s ease;
}
body.noir .auth-left-feature:hover .auth-feature-icon {
background: rgba(42,169,224,0.15);
border-color: rgba(42,169,224,0.42);
}
/* Override hardcoded login/register error box light colors */
body.noir #login-error,
body.noir #reg-error {
background: rgba(255,125,125,0.08) !important;
border: 1px solid rgba(255,125,125,0.30) !important;
color: var(--bad) !important;
border-radius: var(--r-input) !important;
}
/* Admin nav — SVG icon flex */
body.noir .admin-nav-link svg { flex-shrink: 0; }
/* Admin nav — left accent bar on active state */
body.noir .admin-nav-link.active {
background: rgba(42,169,224,0.10) !important;
color: var(--accent) !important;
border-left: 3px solid var(--accent) !important;
border-radius: 0 12px 12px 0 !important;
padding-left: 9px !important;
box-shadow: none !important;
transform: none !important;
}
/* Admin stat cards — accent left borders */
body.noir .admin-stat-card.gold {
border-left: 3px solid var(--gold) !important;
}
body.noir .admin-stat-card.blue {
border-left: 3px solid var(--accent) !important;
}
/* ── Section 26: Password Strength Meter ────────────────────────────────────── */
body.noir .pwd-input-wrap {
position: relative;
}
body.noir .pwd-input-wrap .form-input {
padding-right: 44px;
}
body.noir .pwd-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--color-ash);
padding: 4px;
display: flex;
align-items: center;
transition: color 0.2s;
}
body.noir .pwd-toggle:hover { color: var(--color-slate); }
body.noir .pwd-strength {
margin-top: 8px;
}
body.noir .pwd-strength-bar {
display: flex;
gap: 4px;
margin-bottom: 6px;
}
body.noir .pwd-strength-seg {
height: 3px;
flex: 1;
border-radius: 2px;
background: rgba(255,255,255,0.1);
transition: background 0.3s ease;
}
body.noir .pwd-strength-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
body.noir .pwd-strength-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.3s;
}
body.noir .pwd-strength-hint {
font-size: 11px;
color: var(--color-ash);
text-align: right;
}
/* ── Section 27: Admin Ticket-Type Editor (clear name + price cards) ─────────── */
body.noir .tt-card{
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 12px;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.noir .tt-card:focus-within{
border-color: rgba(42,169,224,0.5);
box-shadow: 0 0 0 3px rgba(42,169,224,0.12);
}
body.noir .tt-card-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:14px; padding-bottom:12px;
border-bottom:1px solid var(--line);
}
body.noir .tt-card-title{
font-family: var(--font-display); font-weight:600; font-size:16px;
letter-spacing:-.01em; color: var(--accent);
}
body.noir .tt-sold-note{ color: var(--gold); font-weight:600; }
body.noir .tt-price-wrap{ position:relative; display:flex; align-items:center; }
body.noir .tt-price-wrap .tt-price{ padding-right:52px; }
body.noir .tt-price-cur{
position:absolute; right:14px; top:50%; transform:translateY(-50%);
font-size:12px; font-weight:700; letter-spacing:.06em;
color: var(--accent); pointer-events:none;
}
/* ── Section 28: Partners — 3D Cards ─────────────────────────────────────────── */
body.noir .partners-3d-section{ position:relative; }
body.noir .partners-3d-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:20px;
perspective:1200px;
}
body.noir .partner-3d-card{
position:relative;
transform-style:preserve-3d;
will-change:transform;
padding:26px 22px 22px;
border-radius:22px;
text-align:center;
cursor:default;
overflow:hidden;
background:
linear-gradient(160deg, rgba(42,169,224,0.10) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.015) 100%),
rgba(17,20,28,0.86);
border:1px solid var(--line-strong);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 0 0 1px rgba(255,255,255,0.02),
0 22px 48px rgba(0,0,0,0.5),
0 10px 30px rgba(42,169,224,0.10);
animation:p3dIn .7s cubic-bezier(.22,1,.36,1) both;
animation-delay:calc(var(--i, 0) * 80ms);
}
@keyframes p3dIn{ from{ opacity:0; transform:translateY(26px) scale(.96); } to{ opacity:1; transform:none; } }
/* cursor-following spotlight */
body.noir .partner-3d-card .p3d-shine{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(42,169,224,0.20), transparent 60%);
opacity:0; transition:opacity .3s ease;
}
body.noir .partner-3d-card:hover{ border-color:rgba(42,169,224,0.45); }
body.noir .partner-3d-card:hover .p3d-shine{ opacity:1; }
/* 3D raised emoji badge */
body.noir .partner-3d-card .p3d-badge{
width:64px; height:64px; margin:0 auto 16px;
border-radius:18px;
display:flex; align-items:center; justify-content:center;
font-size:30px; line-height:1;
transform:translateZ(40px);
background:linear-gradient(155deg, #1b2230 0%, #0c0f16 100%);
border:1px solid rgba(42,169,224,0.30);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
0 10px 22px rgba(0,0,0,0.55),
0 4px 14px rgba(42,169,224,0.25);
}
body.noir .partner-3d-card .p3d-name{
font-family:var(--font-display); font-weight:600; font-size:18px;
letter-spacing:-.01em; color:var(--text);
transform:translateZ(24px);
}
body.noir .partner-3d-card .p3d-cat{
margin-top:7px; display:inline-block;
font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--accent);
background:rgba(42,169,224,0.10);
border:1px solid rgba(42,169,224,0.28);
padding:4px 11px; border-radius:999px;
transform:translateZ(18px);
}
/* featured = gold treatment */
body.noir .partner-3d-card.is-featured{
background:
linear-gradient(160deg, rgba(245,195,24,0.12) 0%, rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.015) 100%),
rgba(20,18,14,0.88);
border-color:rgba(245,195,24,0.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 22px 48px rgba(0,0,0,0.5),
0 10px 30px rgba(245,195,24,0.16);
}
body.noir .partner-3d-card.is-featured .p3d-badge{ border-color:rgba(245,195,24,0.4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.55), 0 4px 14px rgba(245,195,24,0.3); }
body.noir .partner-3d-card.is-featured .p3d-cat{ color:var(--gold); background:rgba(245,195,24,0.10); border-color:rgba(245,195,24,0.3); }
body.noir .partner-3d-card .p3d-star{
position:absolute; top:12px; right:12px;
font-size:10px; font-weight:700; letter-spacing:.06em;
color:#0c0f16; background:var(--gold);
padding:3px 9px; border-radius:999px;
transform:translateZ(30px);
box-shadow:0 4px 12px rgba(245,195,24,0.35);
}
@media (max-width:560px){
body.noir .partners-3d-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
body.noir .partner-3d-card{ padding:20px 14px 18px; }
}
@media (prefers-reduced-motion:reduce){
body.noir .partner-3d-card{ animation:none; }
}
/* ── Section 29: Hero 1000x — cinematic centerpiece ──────────────────────────── */
/* Layout: text left, floating ticket right on wide screens */
body.noir .sl-hero{ padding:104px 24px 128px; }
body.noir .sl-hero-inner{ max-width:1240px; }
@media (min-width:1080px){
body.noir .sl-hero-inner{ padding-right:440px; } /* leave room for the ticket */
}
/* Drifting aurora orbs (GPU-cheap, transform/opacity only) */
body.noir .hero-orbs{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
body.noir .hero-orbs span{
position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
will-change:transform;
}
body.noir .hero-orbs span:nth-child(1){ width:520px; height:520px; top:-120px; right:6%;
background:radial-gradient(circle, rgba(42,169,224,.45), transparent 65%); animation:orbA 18s ease-in-out infinite alternate; }
body.noir .hero-orbs span:nth-child(2){ width:420px; height:420px; bottom:-140px; left:-60px;
background:radial-gradient(circle, rgba(27,135,192,.35), transparent 65%); animation:orbB 22s ease-in-out infinite alternate; }
body.noir .hero-orbs span:nth-child(3){ width:300px; height:300px; top:30%; left:38%;
background:radial-gradient(circle, rgba(245,195,24,.16), transparent 65%); animation:orbA 26s ease-in-out infinite alternate; }
@keyframes orbA{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-40px,30px,0); } }
@keyframes orbB{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(50px,-30px,0); } }
/* Gradient accent line in the headline */
body.noir .hero-grad{
background:linear-gradient(100deg, #5cc0ec 0%, #2aa9e0 42%, #f5c318 130%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
position:relative;
}
/* Button-in-button primary CTA */
body.noir .hero-cta-primary{
display:inline-flex; align-items:center; gap:14px;
background:var(--gradient-rihla); color:#04141f; font-weight:700;
padding:15px 16px 15px 28px; font-size:15px; border-radius:var(--r-pill);
border:none; box-shadow:0 12px 34px rgba(42,169,224,.34), inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
body.noir .hero-cta-primary .cta-ico{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:50%;
background:rgba(4,20,31,.18); color:#04141f; font-size:16px; font-weight:700;
transition:transform .35s var(--ease);
}
body.noir .hero-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(42,169,224,.5), inset 0 1px 0 rgba(255,255,255,.4); }
body.noir .hero-cta-primary:hover .cta-ico{ transform:translate(3px,-1px) scale(1.06); }
body.noir .hero-cta-primary:active{ transform:scale(.98); }
body.noir .hero-cta-ghost{
display:inline-flex; align-items:center; padding:15px 28px; font-size:15px; font-weight:600;
color:var(--text); border-radius:var(--r-pill);
background:var(--surface); border:1px solid var(--line-strong);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
transition:background .25s, border-color .25s, transform .25s var(--ease);
}
body.noir .hero-cta-ghost:hover{ background:var(--surface-2); border-color:rgba(42,169,224,.5); transform:translateY(-2px); }
/* Trust row */
body.noir .hero-trust{ display:flex; align-items:center; gap:14px; margin:-44px 0 64px; }
body.noir .hero-avatars{ display:flex; }
body.noir .hero-avatars span{
width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:15px; background:linear-gradient(155deg,#16202c,#0b1018); border:1.5px solid var(--bg);
box-shadow:0 0 0 1px var(--line-strong); margin-left:-9px;
}
body.noir .hero-avatars span:first-child{ margin-left:0; }
body.noir .hero-trust-text{ font-size:13.5px; color:var(--text-2); line-height:1.4; }
body.noir .hero-stars{ color:var(--gold); letter-spacing:1px; margin-right:8px; }
/* ── Floating 3D ticket mockup ── */
body.noir .hero-ticket{
position:absolute; top:50%; right:max(24px, calc((100% - 1240px)/2 + 24px));
transform:translateY(-50%); z-index:1; perspective:1400px;
display:none;
}
@media (min-width:1080px){ body.noir .hero-ticket{ display:block; } }
body.noir .hero-ticket-card{
width:320px; padding:24px 24px 0; border-radius:24px;
background:linear-gradient(160deg, rgba(26,32,44,.96) 0%, rgba(12,15,22,.97) 100%);
border:1px solid var(--line-strong);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 40px 90px rgba(0,0,0,.6),
0 12px 40px rgba(42,169,224,.22);
transform:rotateY(-16deg) rotateX(7deg) rotate(1.5deg);
transform-style:preserve-3d;
animation:ticketFloat 7s ease-in-out infinite;
}
@keyframes ticketFloat{ 0%,100%{ transform:rotateY(-16deg) rotateX(7deg) rotate(1.5deg) translateY(0); } 50%{ transform:rotateY(-13deg) rotateX(5deg) rotate(1.5deg) translateY(-14px); } }
body.noir .htk-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
body.noir .htk-brand{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); }
body.noir .htk-ar{ color:var(--gold); font-weight:600; font-size:13px; }
body.noir .htk-admit{ font-size:9px; font-weight:700; letter-spacing:.18em; color:var(--accent); border:1px solid rgba(42,169,224,.4); padding:4px 8px; border-radius:6px; }
body.noir .htk-event{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--text); line-height:1; }
body.noir .htk-ar-event{ font-size:14px; color:var(--gold); margin-top:5px; direction:rtl; }
body.noir .htk-meta{ display:flex; gap:34px; margin:20px 0 18px; }
body.noir .htk-meta label{ display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:3px; }
body.noir .htk-meta span{ font-size:14px; font-weight:600; color:var(--text); }
/* perforation line with side notches */
body.noir .htk-perf{ position:relative; height:0; border-top:2px dashed rgba(255,255,255,.16); margin:0 -24px; }
body.noir .htk-perf i{ position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg); }
body.noir .htk-perf i:first-child{ left:-11px; }
body.noir .htk-perf i:last-child{ right:-11px; }
body.noir .htk-stub{ display:flex; align-items:center; gap:16px; padding:20px 0 24px; }
body.noir .htk-qr{ width:74px; height:74px; flex:none; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.4); }
body.noir .htk-stub-meta span{ display:block; font-size:11px; color:var(--text-3); margin-bottom:4px; }
body.noir .htk-stub-meta strong{ font-family:var(--font-mono,monospace); font-size:15px; color:var(--accent); letter-spacing:.04em; }
/* Hero reveal entrance */
body.noir .hero-reveal{ animation:heroReveal 1s var(--ease) both; }
@keyframes heroReveal{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion:reduce){
body.noir .hero-orbs span, body.noir .hero-ticket-card, body.noir .hero-reveal{ animation:none; }
}
@media (max-width:1079px){
body.noir .hero-trust{ margin:-20px 0 48px; }
}
/* ── Section 30: $1M Premium Polish ──────────────────────────────────────────── */
/* Magnetic buttons — JS sets translate; keep GPU-promoted */
body.noir .magnetic{ will-change: transform; }
/* Scroll-reactive glass nav */
body.noir .sl-nav{
transition: padding .38s var(--ease), background .38s ease, box-shadow .38s ease, transform .38s var(--ease);
}
body.noir .sl-nav.scrolled{
padding: 5px 5px 5px 20px;
background: rgba(9,9,14,0.82);
-webkit-backdrop-filter: blur(26px) saturate(1.5);
backdrop-filter: blur(26px) saturate(1.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.62);
}
body.noir .sl-nav.scrolled .sl-nav-logo::before{ width:24px; height:24px; transition: width .38s var(--ease), height .38s var(--ease); }
/* ── Asymmetric Bento (Why Rihla) ── */
body.noir .sl-features-grid.sl-bento{
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(168px, auto);
grid-auto-flow: dense;
gap: 16px;
}
body.noir .sl-bento .feat-hero{ grid-column: span 2; grid-row: span 2; }
body.noir .sl-bento .feat-wide{ grid-column: span 2; }
/* Hero bento cell — larger, gradient-lit, chips pinned to the floor */
body.noir .sl-feature-card.feat-hero{
display: flex; flex-direction: column; padding: 34px;
background:
linear-gradient(165deg, rgba(42,169,224,0.10) 0%, rgba(255,255,255,0.02) 46%, rgba(255,255,255,0.012) 100%),
var(--surface);
border-color: rgba(42,169,224,0.22);
}
body.noir .sl-feature-card.feat-hero .sl-feature-icon{ width:64px; height:64px; font-size:30px; margin-bottom:24px; background: rgba(42,169,224,0.12); border-color: rgba(42,169,224,0.3); }
body.noir .sl-feature-card.feat-hero h3{ font-size: 27px; letter-spacing:-.02em; }
body.noir .sl-feature-card.feat-hero p{ font-size: 15px; line-height:1.72; max-width: 44ch; }
body.noir .feat-hero-foot{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:24px; }
body.noir .feat-chip{
font-size:11px; font-weight:600; letter-spacing:.04em; color: var(--accent);
background: rgba(42,169,224,0.10); border: 1px solid rgba(42,169,224,0.28);
padding: 5px 12px; border-radius: 999px;
}
/* Bento responsive collapse */
@media (max-width: 900px){
body.noir .sl-features-grid.sl-bento{ grid-template-columns: repeat(2, 1fr); }
body.noir .sl-bento .feat-hero{ grid-column: span 2; grid-row: auto; }
body.noir .sl-bento .feat-wide{ grid-column: span 2; }
}
@media (max-width: 560px){
body.noir .sl-features-grid.sl-bento{ grid-template-columns: 1fr; }
body.noir .sl-bento .feat-hero,
body.noir .sl-bento .feat-wide{ grid-column: span 1; }
}
/* Event card — premium product treatment + "seats left" urgency */
body.noir .event-card-img-placeholder{ height: 168px; position: relative; }
body.noir .event-card-img-placeholder::after{
content:''; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 80% at 50% 120%, rgba(42,169,224,0.18), transparent 60%);
}
body.noir .available-badge{
background: rgba(74,222,128,0.12) !important; color:#7df0a8 !important;
border:1px solid rgba(74,222,128,0.3) !important; font-weight:700 !important;
font-size:11px !important; letter-spacing:.02em; padding:5px 11px !important; border-radius:999px !important;
}
body.noir .sold-out-badge{
background: rgba(255,125,125,0.12) !important; color: var(--bad) !important;
border:1px solid rgba(255,125,125,0.3) !important; font-weight:700 !important;
font-size:11px !important; padding:5px 11px !important; border-radius:999px !important;
}
/* prefers-reduced-motion: kill the nav size morph too */
@media (prefers-reduced-motion: reduce){
body.noir .sl-nav, body.noir .magnetic{ transition: none !important; }
}