/* ═══════════════════════════════════════════════════════════════════════════
IMMERSA — Brand Design System
───────────────────────────────────────────────────────────────────────────
Concept : "The Portal" — nested frames receding toward a luminous core.
Discipline: Graphite dominates. Cyan is signal, never decoration.
Holographic gradient is a reward state, not a default.
Typography: Sora (Latin) over Tajawal (Arabic) — stacked so the browser
picks the right family per-glyph automatically.
This file does NOT override existing per-page CSS; it defines brand
tokens on :root and provides utility classes. Include ONCE per page via:
═══════════════════════════════════════════════════════════════════════════ */
/* Fonts are loaded via in each HTML head (not @import) to avoid
render-blocking. The stacking below makes Sora handle Latin glyphs and
Tajawal handle Arabic automatically:
*/
:root {
/* ═══ Color — the brand speaks in graphite and whispers in cyan ═══ */
--im-graphite: #07080C; /* ground — deepest surface */
--im-surface: #11141C; /* elevated — cards, modals */
--im-surface-hi: #1A2030; /* elevated-2 — inputs, pill bg */
--im-border: #1F2738; /* hairline — default */
--im-border-hi: #2E3A52; /* hairline — emphasized */
--im-text: #F3F5F8; /* primary text */
--im-text-dim: #A8B5CC; /* secondary — captions, helper */
--im-text-mute: #6B7F9F; /* tertiary — disabled, AA-compliant on surface */
--im-cyan: #00E5FF; /* SIGNAL — reserved for primary action + active state */
--im-cyan-glow: #66F0FF; /* cyan lifted — hover, focus ring */
--im-blue: #3B82F6; /* supporting — links, neutral info */
--im-violet: #7C5CFF; /* only inside the holographic core */
--im-success: #00C48C;
--im-warn: #F59E0B;
--im-danger: #FF4D6D;
/* Holographic reward — reserved for hero accents, CTA cores, success peaks */
--im-hologram: linear-gradient(135deg, #00E5FF 0%, #66F0FF 45%, #7C5CFF 100%);
--im-hologram-soft: linear-gradient(135deg, rgba(0,229,255,0.18) 0%, rgba(124,92,255,0.14) 100%);
/* Radial core glow — the "arrival point" of the mark */
--im-core-glow: radial-gradient(circle at 50% 50%,
rgba(184,251,255,0.55) 0%,
rgba(0,229,255,0.32) 40%,
rgba(8,145,178,0) 70%);
/* ═══ Typography — Sora for Latin, Tajawal for Arabic (stacked) ═══ */
--im-font-sans: 'Sora', 'Tajawal', system-ui, -apple-system, sans-serif;
--im-font-arabic: 'Tajawal', 'Sora', system-ui, sans-serif; /* force Tajawal-first on Arabic-only blocks */
--im-font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace;
/* Type scale — geometric (1.25 ratio), tuned for Sora's tight tracking */
--im-text-xs: 11px; /* labels, captions, metadata */
--im-text-sm: 13px; /* UI body */
--im-text-base: 15px; /* default reading */
--im-text-md: 17px; /* subheads */
--im-text-lg: 22px; /* card titles */
--im-text-xl: 28px; /* section headers */
--im-text-2xl: 38px; /* page hero */
--im-text-3xl: 52px; /* display */
--im-text-4xl: clamp(44px, 7vw, 84px); /* mega-display — hero only */
/* Tracking — Sora reads tighter than Inter; matching the wordmark's -3.4px cadence at scale */
--im-track-display: -0.035em;
--im-track-heading: -0.018em;
--im-track-body: -0.005em;
--im-track-label: 0.14em; /* UPPERCASE metadata, mono vibe */
/* ═══ Spacing — 4pt grid, enough room to breathe ═══ */
--im-space-1: 4px;
--im-space-2: 8px;
--im-space-3: 12px;
--im-space-4: 16px;
--im-space-5: 20px;
--im-space-6: 24px;
--im-space-8: 32px;
--im-space-10: 40px;
--im-space-12: 48px;
--im-space-16: 64px;
--im-space-20: 80px;
--im-space-24: 96px;
--im-space-32: 128px;
/* ═══ Radius — the mark's nesting ratios (26→20→14→9→4) ═══ */
--im-radius-xs: 4px;
--im-radius-sm: 8px;
--im-radius-md: 12px;
--im-radius-lg: 16px;
--im-radius-xl: 22px;
--im-radius-2xl: 28px;
--im-radius-full: 9999px;
/* ═══ Shadow — depth without heaviness ═══ */
--im-shadow-1: 0 1px 2px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.03) inset;
--im-shadow-2: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
--im-shadow-3: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
--im-shadow-cyan: 0 0 0 1px rgba(0,229,255,0.45), 0 8px 32px rgba(0,229,255,0.18);
--im-shadow-cyan-2: 0 0 0 2px rgba(0,229,255,0.65), 0 12px 44px rgba(0,229,255,0.30);
/* ═══ Motion — the portal breathes ═══ */
--im-ease: cubic-bezier(0.22, 1, 0.36, 1); /* the default — confident exit */
--im-ease-in: cubic-bezier(0.55, 0, 0.78, 0.14); /* grabs attention */
--im-ease-out: cubic-bezier(0.17, 0.84, 0.44, 1); /* arrives softly */
--im-duration-fast: 120ms;
--im-duration-base: 220ms;
--im-duration-slow: 420ms;
--im-duration-slower: 800ms;
/* ═══ Z-index scale ═══ */
--im-z-base: 1;
--im-z-raised: 10;
--im-z-modal: 100;
--im-z-toast: 1000;
--im-z-max: 9999;
/* ═══ Legacy aliases — every existing page sets its own --bg / --accent.
These mirrors let old code coexist without a global rewrite.
Each HTML's local :root can still override. ═══ */
--bg: var(--im-graphite);
--bg2: var(--im-surface);
--surface: var(--im-surface);
--surface2: var(--im-surface-hi);
--border: var(--im-border);
--border2: var(--im-border-hi);
--accent: var(--im-cyan);
--gold: #D4A843; /* kept for tour-price accents */
--text: var(--im-text);
--muted: var(--im-text-mute);
--danger: var(--im-danger);
--success: var(--im-success);
--warn: var(--im-warn);
--sans: var(--im-font-sans);
--mono: var(--im-font-mono);
}
/* ───────────────────────────────────────────────────────────────────────────
Base typography — set here so every page inherits automatically.
Pages retain their own local styles; this just tightens defaults.
─────────────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
font-family: var(--im-font-sans);
font-weight: 300;
letter-spacing: var(--im-track-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern', 'liga', 'calt', 'ss01', 'ss02';
}
/* Arabic pages — nudge toward Tajawal-first so numerals/Arabic align naturally */
html[lang="ar"] body,
html[dir="rtl"] body {
font-family: var(--im-font-arabic);
font-weight: 400; /* Tajawal reads better at 400 than 300 */
letter-spacing: 0; /* Tajawal has its own tracking sweet-spot */
}
::selection {
background: rgba(0, 229, 255, 0.28);
color: var(--im-text);
text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}
/* Firefox-specific ::selection can't inherit text-shadow elegantly; fall back quietly */
::-moz-selection {
background: rgba(0, 229, 255, 0.28);
color: var(--im-text);
}
/* ───────────────────────────────────────────────────────────────────────────
Focus-visible — the cyan halo.
Single signal color for every focusable element. WCAG AA compliant.
Overrides helmet-free default and consolidates what ui-helpers.js injects.
─────────────────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--im-cyan);
outline-offset: 2px;
border-radius: var(--im-radius-xs);
transition: outline-offset var(--im-duration-fast) var(--im-ease);
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-portal-frame
Decorative nested frames echoing the logo mark. Used for hero, empty
states, card hover. Four nested rounded frames with receding opacity.
─────────────────────────────────────────────────────────────────────────── */
.im-portal {
position: relative;
display: inline-grid;
place-items: center;
isolation: isolate;
}
.im-portal::before,
.im-portal::after,
.im-portal > .im-portal-ring {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--im-cyan);
border-radius: var(--im-radius-xl);
pointer-events: none;
}
.im-portal::before { inset: -14px; border-radius: var(--im-radius-2xl); opacity: 0.35; }
.im-portal::after { inset: -4px; border-radius: 24px; opacity: 0.55; }
.im-portal > .im-portal-ring { inset: 8px; border-radius: 14px; opacity: 0.8; }
/* Hover-animated variant — counter-rotating */
@keyframes im-portal-drift-cw { to { transform: rotate(360deg); } }
@keyframes im-portal-drift-ccw { to { transform: rotate(-360deg); } }
.im-portal-animated::before { animation: im-portal-drift-cw 24s linear infinite; }
.im-portal-animated::after { animation: im-portal-drift-ccw 30s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.im-portal-animated::before, .im-portal-animated::after { animation: none; }
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-hologram-text
Rare — hero emphasis, success moments. Never a default heading style.
─────────────────────────────────────────────────────────────────────────── */
.im-hologram-text {
background: var(--im-hologram);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.25));
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-grain
Subtle film-grain overlay — adds tactile depth to flat surfaces.
Apply to containers that feel too clean (hero, cards at rest).
─────────────────────────────────────────────────────────────────────────── */
.im-grain { position: relative; isolation: isolate; }
.im-grain::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-grid-bg
Precision grid — the architectural spatial awareness implicit in the mark.
Use sparingly on hero/landing sections only.
─────────────────────────────────────────────────────────────────────────── */
.im-grid-bg {
background-image:
linear-gradient(to right, rgba(0,229,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,229,255,0.04) 1px, transparent 1px);
background-size: 64px 64px;
background-position: center center;
mask-image: radial-gradient(circle at 50% 40%, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 50% 40%, black 20%, transparent 70%);
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-cta
The hero CTA. Cyan on graphite, 28px radius (matches the mark's outer
frame). Core gradient fills on hover as a "reward" moment.
─────────────────────────────────────────────────────────────────────────── */
.im-cta {
--_h: 52px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: var(--_h);
padding: 0 26px;
border: 0;
border-radius: var(--im-radius-2xl);
background: var(--im-cyan);
color: var(--im-graphite);
font-family: var(--im-font-sans);
font-weight: 600;
font-size: var(--im-text-sm);
letter-spacing: 0;
cursor: pointer;
overflow: hidden;
isolation: isolate;
transition: transform var(--im-duration-base) var(--im-ease),
box-shadow var(--im-duration-base) var(--im-ease);
box-shadow: var(--im-shadow-cyan);
}
.im-cta::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--im-hologram);
opacity: 0;
transition: opacity var(--im-duration-slow) var(--im-ease);
}
.im-cta:hover {
transform: translateY(-1px);
box-shadow: var(--im-shadow-cyan-2);
}
.im-cta:hover::before { opacity: 1; }
.im-cta:active { transform: translateY(0); }
/* Secondary — ghost with portal-outlined border */
.im-cta-ghost {
background: transparent;
color: var(--im-text);
border: 1px solid var(--im-border-hi);
box-shadow: none;
}
.im-cta-ghost::before { display: none; }
.im-cta-ghost:hover {
border-color: var(--im-cyan);
color: var(--im-cyan);
box-shadow: var(--im-shadow-cyan);
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-badge
Mono-typed metadata pill — signals status without shouting.
─────────────────────────────────────────────────────────────────────────── */
.im-badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: var(--im-radius-full);
background: rgba(0, 229, 255, 0.08);
border: 1px solid rgba(0, 229, 255, 0.22);
color: var(--im-cyan);
font-family: var(--im-font-mono);
font-size: 10px;
letter-spacing: var(--im-track-label);
text-transform: uppercase;
white-space: nowrap;
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .sr-only
WCAG visually-hidden pattern — for SEO H1s in the 360° viewer, skip
links, screen-reader metadata.
─────────────────────────────────────────────────────────────────────────── */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ───────────────────────────────────────────────────────────────────────────
Utility: .skip-link
Keyboard users skip straight to #main. Appears only on focus.
─────────────────────────────────────────────────────────────────────────── */
.skip-link {
position: absolute;
top: -40px; left: 8px;
z-index: var(--im-z-max);
padding: 8px 14px;
background: var(--im-cyan);
color: var(--im-graphite);
font-weight: 600;
text-decoration: none;
border-radius: var(--im-radius-sm);
transition: top var(--im-duration-fast) var(--im-ease);
}
.skip-link:focus { top: 8px; }
/* ───────────────────────────────────────────────────────────────────────────
Utility: .im-reveal
Entry animation — stagger reveal for hero stacks.
Usage: …
─────────────────────────────────────────────────────────────────────────── */
@keyframes im-reveal {
from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.im-reveal {
opacity: 0;
animation: im-reveal var(--im-duration-slower) var(--im-ease-out) forwards;
animation-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.im-reveal { animation: none; opacity: 1; filter: none; transform: none; }
}
/* ───────────────────────────────────────────────────────────────────────────
Hero portal mark — counter-rotating rings.
Targets the inline