Spaces:
Runtime error
Runtime error
| @import "tailwindcss"; | |
| :root { | |
| --page-bg: #01040a; | |
| --page-bg-secondary: #041129; | |
| --card-bg: rgba(5, 9, 24, 0.92); | |
| --card-highlight: rgba(56, 149, 255, 0.12); | |
| --accent: #4fb5ff; | |
| --accent-soft: rgba(79, 181, 255, 0.2); | |
| --accent-2: #1f78ff; | |
| --accent-3: #9be8ff; | |
| --text: #f7fbff; | |
| --muted: #99a8c9; | |
| --glass-border: rgba(255, 255, 255, 0.14); | |
| --glow: rgba(63, 176, 255, 0.55); | |
| } | |
| body { | |
| background-color: var(--page-bg); | |
| color: var(--text); | |
| font-feature-settings: "ss01" on; | |
| } | |
| body::before, | |
| body::after { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| body::before { | |
| background-image: | |
| radial-gradient(circle at 12% 18%, rgba(41, 127, 255, 0.35), transparent 52%), | |
| radial-gradient(circle at 80% 0%, rgba(0, 204, 255, 0.28), transparent 45%), | |
| linear-gradient(130deg, rgba(1, 6, 18, 0.95), rgba(3, 15, 37, 0.9)); | |
| filter: blur(90px); | |
| } | |
| body::after { | |
| background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' d='M0 80H160M80 0V160' stroke='white'/%3E%3C/svg%3E"); | |
| opacity: 0.15; | |
| } | |
| .card-panel { | |
| position: relative; | |
| border-radius: 1.6rem; | |
| border: 1px solid var(--glass-border); | |
| background: linear-gradient(145deg, var(--card-bg), rgba(3, 17, 40, 0.8)); | |
| box-shadow: 0 25px 60px rgba(1, 5, 12, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.02); | |
| backdrop-filter: blur(18px) saturate(150%); | |
| overflow: hidden; | |
| } | |
| .card-panel::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 1px; | |
| border-radius: 1.55rem; | |
| background: radial-gradient(circle at 25% 20%, rgba(63, 176, 255, 0.12), transparent 55%); | |
| z-index: 0; | |
| } | |
| .card-panel > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .accent-pill { | |
| border-radius: 999px; | |
| background: linear-gradient(120deg, rgba(42, 122, 255, 0.35), rgba(133, 220, 255, 0.2)); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 0.5rem 1.25rem; | |
| } | |
| .glow-ring { | |
| position: absolute; | |
| inset: -30% auto auto -30%; | |
| width: 60%; | |
| aspect-ratio: 1 / 1; | |
| border-radius: 999px; | |
| background: radial-gradient(circle, rgba(55, 165, 255, 0.32), transparent 70%); | |
| } | |
| .orb { | |
| position: absolute; | |
| width: 220px; | |
| height: 220px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(39, 133, 255, 0.5), rgba(6, 11, 32, 0.1)); | |
| filter: blur(12px); | |
| mix-blend-mode: screen; | |
| animation: float 8s ease-in-out infinite alternate; | |
| } | |
| .orb--azure { | |
| background: radial-gradient(circle, rgba(112, 222, 255, 0.6), rgba(2, 6, 18, 0.1)); | |
| animation-duration: 9.5s; | |
| } | |
| .ticker { | |
| overflow: hidden; | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .ticker-track { | |
| display: inline-flex; | |
| gap: 2rem; | |
| padding: 0.6rem 1.5rem; | |
| animation: ticker 20s linear infinite; | |
| } | |
| .ticker-track span { | |
| color: var(--text); | |
| font-size: 0.85rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .halo-grid { | |
| position: relative; | |
| border-radius: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 1.5rem; | |
| background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(27, 146, 255, 0.08)); | |
| } | |
| .halo-grid::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), | |
| linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); | |
| background-size: 80px 80px; | |
| opacity: 0.08; | |
| mix-blend-mode: screen; | |
| } | |
| .blur-highlight { | |
| border-radius: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: linear-gradient(120deg, rgba(47, 132, 255, 0.12), rgba(113, 212, 255, 0.12)); | |
| } | |
| .neon-text { | |
| color: #fefefe; | |
| text-shadow: 0 0 25px rgba(71, 186, 255, 0.6); | |
| } | |
| .badge-soft { | |
| border-radius: 0.8rem; | |
| padding: 0.35rem 0.8rem; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| font-size: 0.75rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .grid-spine { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 60%); | |
| opacity: 0.05; | |
| } | |
| .surface-grid { | |
| position: relative; | |
| border-radius: 2rem; | |
| padding: 2px; | |
| background: linear-gradient(140deg, rgba(255, 255, 255, 0.15), rgba(63, 176, 255, 0.12)); | |
| } | |
| .surface-grid::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: inherit; | |
| background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| opacity: 0.25; | |
| pointer-events: none; | |
| } | |
| .nav-blur { | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(1, 4, 18, 0.7); | |
| box-shadow: 0 25px 45px rgba(1, 0, 12, 0.35); | |
| backdrop-filter: blur(18px) saturate(150%); | |
| } | |
| .button-super { | |
| border-radius: 999px; | |
| background: linear-gradient(120deg, #0f6bff, #28b0ff, #8ee8ff); | |
| color: #041128; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| box-shadow: 0 20px 40px rgba(58, 159, 255, 0.4); | |
| } | |
| .button-ghost { | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.25); | |
| color: var(--text); | |
| backdrop-filter: blur(8px); | |
| } | |
| .lined-heading { | |
| text-transform: uppercase; | |
| letter-spacing: 0.4em; | |
| font-size: 0.72rem; | |
| color: var(--muted); | |
| } | |
| .metric-pill { | |
| border-radius: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 1.25rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .metric-pill strong { | |
| font-size: 1.9rem; | |
| letter-spacing: 0.04em; | |
| } | |
| .detail-spec { | |
| border-radius: 1.5rem; | |
| padding: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| background: rgba(6, 9, 28, 0.75); | |
| display: grid; | |
| gap: 0.4rem; | |
| } | |
| .detail-spec span { | |
| font-size: 0.8rem; | |
| letter-spacing: 0.2em; | |
| color: var(--muted); | |
| } | |
| .timeline { | |
| position: relative; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .timeline::before { | |
| content: ""; | |
| position: absolute; | |
| left: 20px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent); | |
| } | |
| .timeline li { | |
| margin-left: 50px; | |
| padding: 1.5rem; | |
| border-radius: 1.5rem; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| background: rgba(8, 9, 26, 0.85); | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .timeline-icon { | |
| position: absolute; | |
| left: -38px; | |
| top: 1.5rem; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| background: rgba(255, 255, 255, 0.08); | |
| display: grid; | |
| place-items: center; | |
| } | |
| .gallery-card { | |
| position: relative; | |
| border-radius: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 1.5rem; | |
| background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(0, 167, 255, 0.08)); | |
| overflow: hidden; | |
| } | |
| .gallery-card::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 60%); | |
| opacity: 0.4; | |
| } | |
| .gallery-card > * { | |
| position: relative; | |
| } | |
| .testimonial-card { | |
| border-radius: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| background: rgba(4, 7, 18, 0.9); | |
| padding: 2rem; | |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35); | |
| } | |
| .chip-lens { | |
| border-radius: 999px; | |
| padding: 0.35rem 0.9rem; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| font-size: 0.78rem; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .noise-layer { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Crect width='1' height='1' fill='white'/%3E%3C/svg%3E"); | |
| } | |
| .footer-grid { | |
| display: grid; | |
| gap: 2rem; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate3d(0, 0, 0) scale(1); | |
| } | |
| 50% { | |
| transform: translate3d(20px, -30px, 0) scale(1.05); | |
| } | |
| 100% { | |
| transform: translate3d(-10px, 10px, 0) scale(0.98); | |
| } | |
| } | |
| @keyframes ticker { | |
| from { | |
| transform: translateX(0); | |
| } | |
| to { | |
| transform: translateX(-50%); | |
| } | |
| } | |
| @keyframes pulse-border { | |
| 0% { | |
| box-shadow: 0 0 15px rgba(63, 176, 255, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 45px rgba(123, 232, 255, 0.4); | |
| } | |
| 100% { | |
| box-shadow: 0 0 15px rgba(63, 176, 255, 0.3); | |
| } | |
| } | |