/* ============================================ XLinic Landing — Custom Styles ============================================ */ /* Base */ html { scroll-padding-top: 4rem; } /* Smooth color transitions when switching themes */ body, header, footer, section, .reveal, [class*="bg-ink"], [class*="bg-white"], [class*="bg-cyan"], [class*="border"], [class*="text-white"], [class*="text-muted"] { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; } /* ============================================ Language switcher (shared base) ============================================ */ .lang-link { color: #8b8ba7; } .lang-link:hover { color: #ffffff; } .lang-link.lang-active { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* ============================================ LIGHT MODE Applied when is present. Dark mode remains the default when class is absent. ============================================ */ html.light body { background-color: #fafafa; color: #0a0a0f; } /* Solid backgrounds */ html.light .bg-ink-900 { background-color: #ffffff !important; } html.light .bg-ink-800 { background-color: #f5f5f7 !important; } html.light .bg-ink-700 { background-color: #eeeef2 !important; } /* Translucent backgrounds — reinvent as tinted whites */ html.light .bg-ink-800\/30, html.light .bg-ink-800\/50, html.light .bg-ink-800\/60, html.light .bg-ink-800\/80 { background-color: rgba(245, 245, 247, 0.7) !important; } html.light .bg-ink-700\/80 { background-color: rgba(238, 238, 242, 0.9) !important; } html.light .bg-ink-900\/60, html.light .bg-ink-900\/70 { background-color: rgba(255, 255, 255, 0.75) !important; } /* Gradients involving ink colors */ html.light .bg-gradient-to-b.from-ink-900, html.light .bg-gradient-to-b.to-ink-800 { background-image: linear-gradient(to bottom, #fafafa, #f5f5f7) !important; } /* Text */ html.light .text-white { color: #0a0a0f !important; } html.light .text-muted { color: #5a6270 !important; } html.light .text-white\/60 { color: rgba(10, 10, 15, 0.6) !important; } html.light .text-white\/80 { color: rgba(10, 10, 15, 0.8) !important; } html.light .text-muted\/60 { color: rgba(90, 98, 112, 0.7) !important; } html.light .text-muted\/50 { color: rgba(90, 98, 112, 0.5) !important; } /* Accent colors - darken cyan and coral for legibility on light bg */ html.light .text-cyan { color: #0891b2 !important; } html.light .text-coral { color: #e11d48 !important; } html.light .bg-cyan { background-color: #0891b2 !important; } html.light .bg-cyan\/5 { background-color: rgba(8, 145, 178, 0.06) !important; } html.light .bg-cyan\/10 { background-color: rgba(8, 145, 178, 0.1) !important; } html.light .bg-coral\/10 { background-color: rgba(225, 29, 72, 0.08) !important; } html.light .border-cyan { border-color: #0891b2 !important; } html.light .border-cyan\/20 { border-color: rgba(8, 145, 178, 0.25) !important; } html.light .border-cyan\/30 { border-color: rgba(8, 145, 178, 0.4) !important; } html.light .border-cyan\/40 { border-color: rgba(8, 145, 178, 0.55) !important; } html.light .border-coral\/30 { border-color: rgba(225, 29, 72, 0.35) !important; } /* Gradients with cyan/coral */ html.light .from-cyan { --tw-gradient-from: #0891b2 !important; } html.light .to-cyan { --tw-gradient-to: #0891b2 !important; } html.light .from-cyan\/10 { --tw-gradient-from: rgba(8, 145, 178, 0.1) !important; } html.light .to-cyan\/5 { --tw-gradient-to: rgba(8, 145, 178, 0.05) !important; } html.light .from-cyan\/20 { --tw-gradient-from: rgba(8, 145, 178, 0.2) !important; } html.light .to-coral { --tw-gradient-to: #e11d48 !important; } /* Borders */ html.light .border-white\/5 { border-color: rgba(10, 10, 15, 0.06) !important; } html.light .border-white\/10 { border-color: rgba(10, 10, 15, 0.1) !important; } html.light .border-white\/15 { border-color: rgba(10, 10, 15, 0.15) !important; } html.light .border-white\/30 { border-color: rgba(10, 10, 15, 0.3) !important; } html.light .border-white\/40 { border-color: rgba(10, 10, 15, 0.4) !important; } html.light .hover\:border-white\/25:hover { border-color: rgba(10, 10, 15, 0.25) !important; } html.light .hover\:border-white\/30:hover { border-color: rgba(10, 10, 15, 0.3) !important; } html.light .hover\:border-white\/40:hover { border-color: rgba(10, 10, 15, 0.4) !important; } /* White-alpha backgrounds become black-alpha */ html.light .bg-white\/5 { background-color: rgba(10, 10, 15, 0.04) !important; } html.light .bg-white\/10 { background-color: rgba(10, 10, 15, 0.07) !important; } html.light .hover\:bg-white\/5:hover { background-color: rgba(10, 10, 15, 0.04) !important; } /* Gradient hairlines (from-white/10 etc) */ html.light .from-white\/10 { --tw-gradient-from: rgba(10, 10, 15, 0.1) !important; } html.light .via-white\/5 { --tw-gradient-via: rgba(10, 10, 15, 0.05) !important; } /* Primary CTA (bg-white text-ink-900) needs to invert in light mode */ html.light a.bg-white.text-ink-900, html.light button.bg-white.text-ink-900, html.light .bg-white.text-ink-900 { background-color: #0a0a0f !important; color: #ffffff !important; } html.light a.bg-white.text-ink-900:hover, html.light button.bg-white.text-ink-900:hover, html.light .bg-white.text-ink-900:hover { background-color: #1a1a24 !important; } html.light .hover\:bg-white\/90:hover { background-color: #1a1a24 !important; } /* Nav / footer language switcher base color needs to adapt */ html.light .lang-link { color: #5a6270; } html.light .lang-link:hover { color: #0a0a0f; } html.light .lang-link.lang-active { color: #0a0a0f; background: rgba(10, 10, 15, 0.08); } /* Ambient backdrop — softer wash in light mode */ html.light .ambient-bg { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(8, 145, 178, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(225, 29, 72, 0.04) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 90% 60%, rgba(8, 145, 178, 0.04) 0%, transparent 60%); } html.light .grain { opacity: 0; } /* Gradient text — use darker palette in light so it reads */ html.light .gradient-text { background: linear-gradient(135deg, #0891b2 0%, #7c3aed 50%, #e11d48 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Orbit rings in hero decorative area */ html.light .orbit-rings::before { border-color: rgba(8, 145, 178, 0.14); } html.light .orbit-rings::after { border-color: rgba(225, 29, 72, 0.14); } /* Form fields in contact section */ html.light input[type="text"], html.light input[type="email"], html.light input[type="tel"], html.light select, html.light textarea { color: #0a0a0f; } html.light input[type="text"]::placeholder, html.light input[type="email"]::placeholder, html.light input[type="tel"]::placeholder, html.light textarea::placeholder { color: rgba(10, 10, 15, 0.4); } /* intl-tel-input on light background */ html.light .iti__selected-flag { background: rgba(255, 255, 255, 0.9) !important; border-radius: 0.5rem 0 0 0.5rem !important; } html[dir="rtl"].light .iti__selected-flag { border-radius: 0 0.5rem 0.5rem 0 !important; } html.light .iti__country-list { background: #ffffff !important; border: 1px solid rgba(10, 10, 15, 0.1) !important; color: #0a0a0f !important; } html.light .iti__country:hover { background: rgba(10, 10, 15, 0.04) !important; } html.light .iti__country.iti__highlight { background: rgba(8, 145, 178, 0.1) !important; } html.light .iti__divider { border-color: rgba(10, 10, 15, 0.1) !important; } html.light .iti__dial-code { color: rgba(10, 10, 15, 0.6) !important; } /* Theme toggle button icon visibility */ html.light .icon-sun { display: none; } html.light .icon-moon { display: inline-block; } /* Logo wrapper — transparent in dark mode; becomes a premium dark "badge" in light mode with a subtle gradient body, gradient-bordered edge, inner highlight, and a cyan-tinted drop-shadow. */ .logo-wrap { position: relative; isolation: isolate; transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } html.light .logo-wrap { padding: 0.5rem 0.9rem; border-radius: 0.75rem; background: radial-gradient(120% 140% at 50% -20%, rgba(0, 212, 255, 0.14) 0%, transparent 55%), linear-gradient(180deg, #161622 0%, #0a0a0f 100%); box-shadow: 0 1px 2px rgba(10, 10, 15, 0.06), 0 12px 32px -14px rgba(8, 145, 178, 0.45), 0 2px 12px -6px rgba(10, 10, 15, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Gradient hairline border using mask-composite for a clean premium edge */ html.light .logo-wrap::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(0, 212, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.02) 60%, rgba(255, 107, 107, 0.35) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* Soft specular highlight across the top edge */ html.light .logo-wrap::after { content: ''; position: absolute; top: 1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); border-radius: 1px; pointer-events: none; z-index: 2; } html.light .logo-wrap img { position: relative; z-index: 0; } /* RTL adjustments */ html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; } html[dir="rtl"] .font-display { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; } /* Ambient background — radial glow layers */ .ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255, 107, 107, 0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 90% 60%, rgba(0, 212, 255, 0.05) 0%, transparent 60%); } /* Subtle noise/grain */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } /* Relative positioning for main content */ main, header, footer { position: relative; z-index: 2; } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 50%, #ff6b6b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Radial background utility */ .bg-gradient-radial { background: radial-gradient(circle, var(--tw-gradient-from, rgba(0,212,255,0.2)) 0%, var(--tw-gradient-to, transparent) 70%); } /* Scroll reveal animation */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Spline viewer — transparent wrapper so the 3D scene floats on the page */ spline-viewer { width: 100%; height: 100%; display: block; background: transparent !important; background-color: transparent !important; } spline-viewer::part(canvas), spline-viewer canvas { background: transparent !important; background-color: transparent !important; } /* Hide the Spline watermark if present */ spline-viewer::part(logo) { display: none !important; } /* Orbit rings (decorative, around Spline) */ .orbit-rings::before, .orbit-rings::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(0, 212, 255, 0.08); border-radius: 50%; pointer-events: none; } .orbit-rings::before { width: 110%; height: 110%; animation: orbit 40s linear infinite; } .orbit-rings::after { width: 85%; height: 85%; border-color: rgba(255, 107, 107, 0.08); animation: orbit 60s linear infinite reverse; } @keyframes orbit { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 30s linear infinite; } .animate-spin-slower { animation: spin-slow 50s linear infinite reverse; } /* Feature grid cell hover glow */ .feature-cell { transition: background 0.5s ease, transform 0.3s ease; } /* Phone input integration with dark theme */ .iti { width: 100%; } .iti__flag-container { background: transparent !important; } .iti__selected-flag { background: rgba(10, 10, 15, 0.6) !important; border-radius: 0.5rem 0 0 0.5rem !important; } html[dir="rtl"] .iti__selected-flag { border-radius: 0 0.5rem 0.5rem 0 !important; } .iti__country-list { background: #14141c !important; border: 1px solid rgba(255,255,255,0.1) !important; color: white !important; } .iti__country:hover { background: rgba(255,255,255,0.05) !important; } .iti__country.iti__highlight { background: rgba(0, 212, 255, 0.1) !important; } .iti__divider { border-color: rgba(255,255,255,0.1) !important; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .orbit-rings::before, .orbit-rings::after, .animate-spin-slow, .animate-spin-slower { animation: none !important; } html { scroll-behavior: auto !important; } } /* Responsive tweaks */ @media (max-width: 640px) { spline-viewer { min-height: 320px; } }