/* ============================================================ X24 Technologies — Shared theme Dark + Light mode via [data-theme] on . Default is dark. ============================================================ */ /* --- DARK (default) --- */ :root, :root[data-theme="dark"] { --bg: #08090b; --bg2: #0d0e12; --surface: #101218; --surface-2: rgba(255,255,255,0.035); --surface-3: rgba(255,255,255,0.06); --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.05); --ink: #f0f1f5; --ink-soft: #cfd1d8; --muted: #8b8d96; --dim: #5d606b; --blue: #5b8cff; --violet: #b78cff; --mint: #5eead4; --peach: #ffb38c; --grain-opacity: 0.05; --mesh-opacity: 0.55; --grid-color: rgba(255,255,255,0.04); --particle-line: rgba(140,160,220,0.18); --pill-bg: rgba(255,255,255,0.04); --nav-bg: rgba(8,9,11,0.6); --terminal-bg: rgba(0,0,0,0.4); --code-shadow: 0 40px 80px -30px rgba(91,140,255,0.18); --btn-grad-bg: linear-gradient(110deg,#ffffff 0%,#e6e7ec 50%,#ffffff 100%); --btn-grad-fg: #0a0b0e; } /* --- LIGHT --- */ :root[data-theme="light"] { --bg: #fafaf7; --bg2: #f3f2ed; --surface: #ffffff; --surface-2: #ffffff; --surface-3: rgba(13,21,28,0.04); --line: rgba(13,21,28,0.08); --line-2: rgba(13,21,28,0.05); --ink: #0d151c; --ink-soft: #2a3140; --muted: #5a5d66; --dim: #8d8d85; --blue: #3b63d8; --violet: #8b5fd8; --mint: #14b8a6; --peach: #f59e6b; --grain-opacity: 0.025; --mesh-opacity: 0.32; --grid-color: rgba(13,21,28,0.06); --particle-line: rgba(91,107,160,0.18); --pill-bg: #ffffff; --nav-bg: rgba(250,250,247,0.72); --terminal-bg: #0d151c; --code-shadow: 0 24px 48px -16px rgba(13,21,28,0.10); --btn-grad-bg: linear-gradient(110deg,#0d151c 0%,#2a3140 50%,#0d151c 100%); --btn-grad-fg: #ffffff; } * { box-sizing: border-box; } html, body { background: var(--bg); } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; transition: background-color .35s, color .35s; } /* Subtle grain */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: var(--grain-opacity); pointer-events: none; z-index: 100; mix-blend-mode: overlay; } ::selection { background: rgba(91,140,255,0.25); color: var(--ink); } img { max-width: 100%; height: auto; display: block; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { letter-spacing: -0.025em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } .font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.035em; } .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } .font-sans { font-family: 'Inter', sans-serif; } .display-1 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; } .display-2 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; } /* Animated gradient text */ .text-flow { background: linear-gradient(120deg, var(--blue) 0%, var(--violet) 35%, var(--mint) 70%, var(--peach) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 9s linear infinite; } @keyframes flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* Eyebrow */ .eyebrow { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.7rem; } .eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--blue), var(--violet)); } /* ============================================================ BACKGROUND ELEMENTS — mesh, grid, particles ============================================================ */ .mesh-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .mesh-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--mesh-opacity); will-change: transform; } .mesh-blob.a { width: 620px; height: 620px; background: radial-gradient(circle, var(--blue) 0%, transparent 60%); top: -120px; left: -100px; animation: blobA 22s ease-in-out infinite alternate; } .mesh-blob.b { width: 720px; height: 720px; background: radial-gradient(circle, var(--violet) 0%, transparent 60%); top: -200px; right: -180px; animation: blobB 26s ease-in-out infinite alternate; } .mesh-blob.c { width: 540px; height: 540px; background: radial-gradient(circle, var(--mint) 0%, transparent 60%); top: 200px; left: 35%; animation: blobC 30s ease-in-out infinite alternate; opacity: calc(var(--mesh-opacity) * 0.7); } .mesh-blob.d { width: 480px; height: 480px; background: radial-gradient(circle, var(--peach) 0%, transparent 65%); bottom: -120px; right: 10%; animation: blobD 24s ease-in-out infinite alternate; opacity: calc(var(--mesh-opacity) * 0.6); } @keyframes blobA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px, 80px) scale(1.15); } } @keyframes blobB { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-80px, 60px) scale(1.1); } } @keyframes blobC { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-100px,-60px) scale(1.2); } } @keyframes blobD { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(60px,-80px) scale(1.15); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; } #particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.7; } /* ============================================================ GLASS CARD ============================================================ */ .glass { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); position: relative; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; } :root[data-theme="light"] .glass { background: #ffffff; box-shadow: 0 1px 2px rgba(13,21,28,0.04), 0 24px 48px -24px rgba(13,21,28,0.08); } .glass:hover { transform: translateY(-3px); border-color: rgba(91,140,255,0.35); box-shadow: 0 40px 80px -30px rgba(91,140,255,0.22); } :root[data-theme="light"] .glass:hover { border-color: rgba(91,140,255,0.4); box-shadow: 0 1px 2px rgba(13,21,28,0.06), 0 32px 64px -16px rgba(91,140,255,0.18); } .glass-glow { position: relative; } .glass-glow::before { content: ''; position: absolute; inset: -1px; border-radius: 19px; padding: 1px; background: conic-gradient(from 200deg at 50% 50%, var(--blue), var(--violet), var(--mint), var(--peach), var(--blue)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; } .glass-glow:hover::before { opacity: 0.75; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 500; font-size: .92rem; transition: all .25s; cursor: pointer; white-space: nowrap; border: none; font-family: inherit; } .btn-grad { color: var(--btn-grad-fg); background: var(--btn-grad-bg); background-size: 200% 100%; box-shadow: 0 10px 30px -10px rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.4); } :root[data-theme="light"] .btn-grad { box-shadow: 0 10px 30px -10px rgba(13,21,28,0.25), inset 0 0 0 1px rgba(255,255,255,0.1); } .btn-grad:hover { background-position: 100% 50%; transform: translateY(-1px); } .btn-glow { color: #fff; position: relative; background: linear-gradient(110deg, var(--blue) 0%, var(--violet) 100%); box-shadow: 0 12px 40px -10px rgba(91,140,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.18); } .btn-glow::before { content: ''; position: absolute; inset: -2px; border-radius: 999px; background: linear-gradient(110deg, var(--blue), var(--violet), var(--mint)); filter: blur(14px); opacity: .4; z-index: -1; transition: opacity .25s; } .btn-glow:hover::before { opacity: .75; } .btn-glow:hover { transform: translateY(-1px); } .btn-ghost { color: var(--ink); background: var(--surface-3); border: 1px solid var(--line); backdrop-filter: blur(8px); } .btn-ghost:hover { background: var(--surface-2); border-color: rgba(91,140,255,0.4); } :root[data-theme="light"] .btn-ghost { background: #ffffff; } :root[data-theme="light"] .btn-ghost:hover { background: var(--bg2); } /* ============================================================ ICON PLATE ============================================================ */ .icon-plate { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, rgba(91,140,255,0.18), rgba(183,140,255,0.08)); border: 1px solid var(--line); color: var(--blue); position: relative; flex-shrink: 0; } :root[data-theme="light"] .icon-plate { background: linear-gradient(140deg, rgba(91,140,255,0.12), rgba(183,140,255,0.06)); color: var(--blue); } .icon-plate svg { width: 22px; height: 22px; stroke-width: 1.5; } /* ============================================================ PILL ============================================================ */ .pill { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem 1rem; border-radius: 999px; background: var(--pill-bg); border: 1px solid var(--line); backdrop-filter: blur(10px); font-size: .82rem; color: var(--ink-soft); } .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 0 4px rgba(94,234,212,0.18), 0 0 12px var(--mint); animation: pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 4px rgba(94,234,212,0.18), 0 0 12px var(--mint); } 50% { box-shadow: 0 0 0 8px rgba(94,234,212,0.05), 0 0 20px var(--mint); } } /* ============================================================ MARQUEE ============================================================ */ .marquee { display: flex; overflow: hidden; width: 100%; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .marquee-track { display: flex; gap: 4rem; animation: scroll 36s linear infinite; flex-shrink: 0; padding-right: 4rem; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } .marquee-item { font-family: 'Space Grotesk', sans-serif; font-size: 1.65rem; font-weight: 500; letter-spacing: -0.025em; color: var(--muted); opacity: 0.7; white-space: nowrap; display: flex; align-items: center; gap: .65rem; } .marquee-item .star { width: 6px; height: 6px; background: linear-gradient(135deg, var(--blue), var(--violet)); transform: rotate(45deg); border-radius: 1px; } /* ============================================================ TECH CHIP ============================================================ */ .tech-chip { display: inline-flex; flex-direction: column; padding: .7rem 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); transition: all .25s; } :root[data-theme="light"] .tech-chip { background: #ffffff; } .tech-chip:hover { background: var(--surface-3); border-color: rgba(91,140,255,0.4); transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(91,140,255,0.25); } .tech-chip .cat { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; } .tech-chip .nm { color: var(--ink); font-weight: 500; font-size: .9rem; margin-top: 2px; } /* ============================================================ INDUSTRY TAG ============================================================ */ .industry-tag { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: rgba(91,140,255,0.08); border: 1px solid rgba(91,140,255,0.18); color: var(--blue); font-size: .7rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; } /* ============================================================ FAQ ============================================================ */ details.faq { border-top: 1px solid var(--line); } details.faq:last-of-type { border-bottom: 1px solid var(--line); } details.faq > summary { list-style: none; cursor: pointer; padding: 1.5rem 0; display: flex; align-items: start; justify-content: space-between; gap: 2rem; transition: color .2s; } details.faq > summary:hover { color: var(--ink); } details.faq > summary::-webkit-details-marker { display: none; } details.faq .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; color: var(--muted); font-size: 1rem; line-height: 1; } details.faq[open] .plus { transform: rotate(45deg); background: linear-gradient(110deg, var(--blue), var(--violet)); color: #fff; border-color: transparent; } details.faq > div { padding: 0 0 1.5rem; color: var(--muted); max-width: 70ch; line-height: 1.65; } /* ============================================================ STAT NUM + COUNTERS ============================================================ */ .stat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.045em; line-height: 1; } /* ============================================================ PROCESS / STEPS ============================================================ */ .step-line { position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .step-dot { width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 0 0 4px rgba(91,140,255,0.18); } /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ NAV ============================================================ */ .nav-shell { background: var(--nav-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--line); } .nav-link { color: var(--muted); transition: color .2s; position: relative; font-size: 0.9rem; } .nav-link:hover { color: var(--ink); } .nav-link.active { color: var(--ink); } .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); border-radius: 2px; } /* Theme toggle button */ .theme-toggle { width: 36px; height: 36px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all .25s; cursor: pointer; } .theme-toggle:hover { color: var(--ink); border-color: rgba(91,140,255,0.4); } .theme-toggle .sun-icon, .theme-toggle .moon-icon { width: 16px; height: 16px; } :root[data-theme="dark"] .theme-toggle .sun-icon { display: block; } :root[data-theme="dark"] .theme-toggle .moon-icon { display: none; } :root[data-theme="light"] .theme-toggle .sun-icon { display: none; } :root[data-theme="light"] .theme-toggle .moon-icon { display: block; } /* ============================================================ CASE STUDY VISUAL ============================================================ */ .case-visual { position: relative; overflow: hidden; } /* ============================================================ SOCIAL DOT ============================================================ */ .social-dot { width: 36px; height: 36px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: all .25s; color: var(--muted); font-size: 14px; cursor: pointer; } .social-dot:hover { background: var(--surface-2); border-color: rgba(255,255,255,0.2); color: var(--ink); transform: translateY(-2px); } :root[data-theme="light"] .social-dot:hover { background: #fff; border-color: rgba(13,21,28,0.2); } /* ============================================================ INPUT + FORM ============================================================ */ .input { background: var(--surface-3); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: .7rem 1rem; font-size: .9rem; transition: all .2s; width: 100%; font-family: inherit; } :root[data-theme="light"] .input { background: #ffffff; } .input::placeholder { color: var(--dim); } .input:focus { outline: none; border-color: rgba(91,140,255,0.5); background: var(--surface-2); box-shadow: 0 0 0 4px rgba(91,140,255,0.08); } .field-label { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; display: block; } textarea.input { resize: vertical; min-height: 120px; font-family: inherit; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 1024px) { .wrap { padding: 0 2rem; } } .section { padding: 5rem 0; position: relative; } .section-lg { padding: 8rem 0; position: relative; } .section-divider { border-top: 1px solid var(--line); } /* Tailwind utility passthroughs we use a lot — backed up with explicit rules */ .text-ink { color: var(--ink); } .text-muted { color: var(--muted); } .text-dim { color: var(--dim); } .text-blue { color: var(--blue); } .text-violet { color: var(--violet); } .text-mint { color: var(--mint); } .text-peach { color: var(--peach); } .text-ink-soft { color: var(--ink-soft); } .bg-bg { background: var(--bg); } .bg-bg2 { background: var(--bg2); } .bg-surface { background: var(--surface); } .border-line { border-color: var(--line); } /* ============================================================ PREVIEW BANNER (top-right) ============================================================ */ .preview-banner { position: fixed; top: 16px; right: 16px; z-index: 200; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(20px); border-radius: 999px; padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; } .preview-banner .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--mint); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px var(--mint); } /* ============================================================ TERMINAL / CODE BLOCK ============================================================ */ .terminal { background: var(--terminal-bg); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.7; color: var(--ink-soft); } :root[data-theme="light"] .terminal { color: #f0f1f5; } .terminal .ok { color: var(--mint); } .terminal .out { color: var(--muted); } .terminal .blue { color: var(--blue); } :root[data-theme="light"] .terminal .out { color: rgba(255,255,255,0.55); } /* ============================================================ BLOG CARD ============================================================ */ .blog-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: all .35s; display: block; } :root[data-theme="light"] .blog-card { background: #ffffff; } .blog-card:hover { transform: translateY(-3px); border-color: rgba(91,140,255,0.35); box-shadow: 0 30px 60px -20px rgba(91,140,255,0.15); } .blog-card .thumb { height: 200px; position: relative; overflow: hidden; } .blog-card .cat-tag { position: absolute; top: 12px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255,255,255,0.15); } /* ============================================================ RESPONSIVE TYPE ============================================================ */ @media (max-width: 768px) { .section { padding: 4rem 0; } .section-lg { padding: 5rem 0; } } /* ============================================================ PROJECT PAGE: ALT LAYOUT ============================================================ */ .project-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); } .project-meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .project-meta .ic { color: var(--blue); } .result-pill { padding: 1rem 1rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; } :root[data-theme="light"] .result-pill { background: #fff; } .result-pill .num { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 1.5rem; letter-spacing: -0.025em; background: linear-gradient(110deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } .result-pill .lbl { font-size: 0.7rem; color: var(--muted); margin-top: 0.25rem; }