/* ========================================================================== Avish Technologies — Design System Premium dark theme. Hand-built, dependency-light. ========================================================================== */ :root { /* Palette */ --bg: #06070b; --bg-soft: #0b0d14; --surface: #0f121b; --surface-2: #141826; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #f4f6fb; --text-soft: #b6bdcc; --text-mute: #7c8597; /* Brand accent — electric indigo → cyan */ --accent: #6d8bff; --accent-2: #43e7d0; --accent-3: #b078ff; --grad: linear-gradient(110deg, var(--accent-3), var(--accent) 45%, var(--accent-2)); --grad-soft: linear-gradient(110deg, rgba(176,120,255,.18), rgba(109,139,255,.18) 45%, rgba(67,231,208,.18)); /* Type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Sora", var(--font); /* Layout */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); --radius: 18px; --radius-sm: 12px; --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; opacity: 1; /* reveals content once this stylesheet applies (anti-FOUC; see inline shell in ) */ } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: rgba(109, 139, 255, 0.3); } /* Ambient page background */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; /* lvh: stable when the mobile URL bar collapses */ transform: translateZ(0); z-index: -2; background: radial-gradient(60% 50% at 80% -10%, rgba(176,120,255,.16), transparent 60%), radial-gradient(50% 50% at 0% 0%, rgba(67,231,208,.10), transparent 55%), radial-gradient(60% 60% at 50% 110%, rgba(109,139,255,.12), transparent 60%); } body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; transform: translateZ(0); z-index: -1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 11vw, 140px); position: relative; } .section--tight { padding-block: clamp(48px, 7vw, 90px); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.07; letter-spacing: -0.02em; } .display { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -0.035em; } h2.title { font-size: clamp(2rem, 4.6vw, 3.4rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-soft); max-width: 60ch; } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .8; } .muted { color: var(--text-soft); } /* ---------- Buttons ---------- */ .btn { --pad-y: 14px; --pad-x: 26px; position: relative; display: inline-flex; align-items: center; gap: 10px; padding: var(--pad-y) var(--pad-x); border-radius: 100px; font-weight: 600; font-size: .98rem; border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; will-change: transform; } .btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); } .btn-primary { color: #07090f; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(109,139,255,.6); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(109,139,255,.7); } .btn-primary:hover svg { transform: translateX(4px); } .btn-ghost { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,.02); } .btn-ghost:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(255,255,255,.05); } .btn-lg { --pad-y: 17px; --pad-x: 34px; font-size: 1.02rem; } /* ---------- Cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); transition: transform .4s var(--ease), border-color .4s, background .4s; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; } .card:hover { transform: translateY(-6px); background: var(--surface-2); } .card:hover::before { opacity: 1; } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(240px circle at var(--sx, -300px) var(--sy, -300px), rgba(109,139,255,.12), transparent 65%); } .card:hover::after { opacity: 1; } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(6, 7, 11, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; } .brand .logo { width: 34px; height: 34px; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-links a { padding: 9px 15px; border-radius: 100px; font-size: .95rem; color: var(--text-soft); transition: color .25s, background .25s; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.05); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: 0; color: var(--text); width: 44px; height: 44px; } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 900px) { .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: grid; place-items: center; } .mobile-menu { position: fixed; inset: 74px 0 0 0; z-index: 99; background: rgba(6,7,11,.97); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 6px; padding: 24px var(--gutter); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .35s var(--ease); } .mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; } .mobile-menu a { padding: 16px 12px; font-size: 1.3rem; font-family: var(--font-display); border-bottom: 1px solid var(--border); } .mobile-menu .btn { margin-top: 16px; justify-content: center; } } @media (min-width: 901px) { .mobile-menu { display: none; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding-block: clamp(48px, 7vw, 80px) 32px; margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; } .footer-grid h4 { font-family: var(--font); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 18px; } .footer-links { display: flex; flex-direction: column; gap: 11px; } .footer-links a { display: flex; align-items: flex-start; gap: 10px; color: var(--text-soft); transition: color .25s; width: fit-content; } .footer-links a:hover { color: var(--accent); } /* Icon chip: a small tinted circle in the item's assigned brand colour (--fi-c, an "r,g,b" triplet), glowing brighter on hover - same visual language as the tech-logo chips elsewhere on the site, but using the site's own 3-colour gradient, not per-item arbitrary colours. */ .fi-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; background: rgba(var(--fi-c), .12); transition: background .25s, box-shadow .25s; } .fi-ico { width: 14px; height: 14px; opacity: .95; } .footer-links a:hover .fi-chip { background: rgba(var(--fi-c), .22); box-shadow: 0 0 14px -3px rgb(var(--fi-c)); } .footer-brand-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .footer-brand-meta .fbm-row { display: flex; align-items: center; gap: 10px; color: var(--text-mute); font-size: .85rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); color: var(--text-mute); font-size: .88rem; } /* Rotating 3D globes (canvas + caption pattern shared by the footer coverage globe and the Work-page stack globe below). Each wrapper just needs position:relative + a height; these child rules handle the canvas fill and the caption/pulse-dot underneath it. */ .footer-globe canvas, .stack-globe-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; } .footer-globe .fg-cap, .stack-globe-wrap .fg-cap { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 100px; pointer-events: none; transition: color .2s, background .2s, box-shadow .2s; } .footer-globe .fg-dot, .stack-globe-wrap .fg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); animation: pulse 2.2s infinite; flex: none; } /* Hovering a hub/logo names it in the caption below the globe - bump size, brighten to full text colour and add a soft pill so the name reads clearly instead of blending into the default muted, all-caps label style. */ .footer-globe .fg-cap.is-hot, .stack-globe-wrap .fg-cap.is-hot { font-size: .74rem; letter-spacing: .04em; text-transform: none; color: var(--text); background: rgba(67,231,208,.1); box-shadow: 0 0 0 1px rgba(67,231,208,.25); padding: 5px 12px; } .footer-globe .fg-cap.is-hot .fg-txt, .stack-globe-wrap .fg-cap.is-hot .fg-txt { font-weight: 600; } /* Footer: lives in the row-2 columns next to "Get in touch". align-self: start (not stretch, the grid default) so the box hugs its own content instead of stretching to match the taller Services/Company columns above it. */ .footer-globe { grid-column: 2 / -1; grid-row: 2; position: relative; height: 220px; align-self: start; } /* Work page: sits in the .split text+visual grid (same pattern as the Services page capability radar / tech orbits) instead of a centered island - fills its column so the section doesn't read as empty on wide screens. */ .stack-globe-wrap { position: relative; width: 100%; height: clamp(320px, 30vw, 440px); } @media (max-width: 640px) { .stack-globe-wrap { height: 320px; } } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } .footer-globe { grid-column: 1 / -1; grid-row: auto; height: 210px; margin-top: 12px; margin-bottom: 30px; } } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 0 rgba(67,231,208,.6); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(67,231,208,.5); } 70% { box-shadow: 0 0 0 9px rgba(67,231,208,0); } 100% { box-shadow: 0 0 0 0 rgba(67,231,208,0); } } .hero .lead { margin-bottom: 38px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero-stats { display: flex; gap: clamp(28px, 5vw, 64px); margin-top: clamp(56px, 8vw, 96px); flex-wrap: wrap; } .stat .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; } .stat .label { color: var(--text-mute); font-size: .92rem; } /* Marquee of technologies */ .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll-x 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { color: var(--text-mute); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); white-space: nowrap; } @keyframes scroll-x { to { transform: translateX(-50%); } } /* ========================================================================== SECTIONS: grids ========================================================================== */ .section-head { max-width: 64ch; margin-bottom: clamp(40px, 6vw, 64px); } .section-head .lead { margin-top: 18px; } .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } } /* Service card */ .service-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border); margin-bottom: 22px; } .service-card .ic svg { width: 26px; height: 26px; stroke: var(--accent-2); } .service-card .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .tag { font-size: .76rem; color: var(--text-mute); border: 1px solid var(--border); border-radius: 100px; padding: 4px 11px; white-space: nowrap; } /* Process / steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding-top: 26px; border-top: 1px solid var(--border); } .step .n { font-family: var(--font-display); font-size: .85rem; color: var(--accent); font-weight: 700; letter-spacing: .1em; } .step h3 { font-size: 1.15rem; margin: 12px 0 8px; } .step p { color: var(--text-soft); font-size: .94rem; } /* Feature split */ .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .checklist { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 28px; } .checklist li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-soft); } .checklist .tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-soft); border: 1px solid var(--border); display: grid; place-items: center; margin-top: 2px; } .checklist .tick svg { width: 13px; height: 13px; stroke: var(--accent-2); } .visual-panel { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); border: 1px solid var(--border); background: radial-gradient(120% 120% at 0% 0%, var(--surface-2), var(--bg)); overflow: hidden; display: grid; place-items: center; } .visual-panel .orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; } .statband .card { text-align: center; } /* CTA band */ .cta-band { position: relative; border-radius: clamp(20px, 3vw, 32px); padding: clamp(40px, 7vw, 86px); text-align: center; overflow: hidden; border: 1px solid transparent; background: radial-gradient(120% 140% at 50% 0%, rgba(109,139,255,.16), transparent 60%), var(--surface); } .cta-band::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(110deg, rgba(176,120,255,.7), rgba(109,139,255,.15) 30%, rgba(67,231,208,.7) 50%, rgba(109,139,255,.15) 70%, rgba(176,120,255,.7)); background-size: 300% 100%; animation: cta-border 7s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @keyframes cta-border { to { background-position: 300% 0; } } .cta-band h2 { margin-bottom: 18px; } .cta-band .lead { margin: 0 auto 34px; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ========================================================================== PAGE HEADER (interior pages) ========================================================================== */ .page-hero { padding-top: clamp(130px, 17vh, 180px); padding-bottom: clamp(40px, 6vw, 70px); } .page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); max-width: 18ch; margin: 18px 0 22px; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ff6b6b; background: rgba(255, 107, 107, .06); box-shadow: 0 0 0 3px rgba(255, 107, 107, .12); } .field.invalid .field-msg { max-height: 40px; opacity: 1; margin-top: 7px; } .field.invalid.shake input, .field.invalid.shake select, .field.invalid.shake textarea { animation: field-shake .38s var(--ease); } @keyframes field-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .btn.is-loading .btn-spinner { display: inline-block; } .btn.is-loading .btn-label::after { content: "\2026"; } .btn.is-loading svg { display: none; } .form-status.show { display: flex; opacity: 1; transform: none; } .form-status.ok { background: rgba(67,231,208,.1); border: 1px solid rgba(67,231,208,.3); color: var(--accent-2); } .form-status.ok .fs-icon { background: var(--accent-2); color: #07090f; } .form-status.ok .fs-icon::before { content: "\2713"; } .form-status.err { background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.3); color: #ff9b9b; animation: field-shake .38s var(--ease); } .form-status.err .fs-icon { background: #ff6b6b; color: #2a0a0a; } .form-status.err .fs-icon::before { content: "!"; } .contact-info .row { display: flex; gap: 16px; align-items: flex-start; } .contact-info .ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--grad-soft); border: 1px solid var(--border); display: grid; place-items: center; } .contact-info .ic svg { width: 22px; height: 22px; stroke: var(--accent-2); } .contact-info .k { font-size: .8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .08em; } .contact-info .v { font-size: 1.1rem; font-weight: 600; } /* Work / case cards */ .work-card { display: block; } .work-card .thumb { aspect-ratio: 16/10; border-radius: var(--radius-sm); margin-bottom: 20px; position: relative; overflow: hidden; border: 1px solid var(--border); } .work-card .thumb .mesh { position: absolute; inset: -20%; filter: blur(30px); opacity: .7; transition: transform .6s var(--ease); } .work-card:hover .thumb .mesh { transform: scale(1.15) rotate(8deg); } .work-card .cat { font-size: .8rem; color: var(--accent); letter-spacing: .06em; } .work-card h3 { margin: 8px 0 8px; } /* FAQ */ .faq { border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; background: none; border: 0; color: var(--text); text-align: left; padding: 24px 0; font-family: var(--font-display); font-size: clamp(1.05rem,1.6vw,1.25rem); font-weight: 600; display: flex; justify-content: space-between; gap: 20px; align-items: center; } .faq-q .pm { flex: none; width: 26px; height: 26px; position: relative; } .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--accent); transition: transform .3s; } .faq-q .pm::before { width: 14px; height: 2px; } .faq-q .pm::after { width: 2px; height: 14px; } .faq-item.open .pm::after { transform: rotate(90deg); opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .faq-a p { padding-bottom: 24px; color: var(--text-soft); max-width: 75ch; } /* ---------- Scroll reveal ---------- Hidden ONLY when JS marks body.anim-ready, so content is never stuck hidden if JS or a lib fails to load (and for reduced-motion users). */ .anim-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .anim-ready [data-reveal].in { opacity: 1; transform: none; } .anim-ready [data-reveal-delay="1"] { transition-delay: .08s; } .anim-ready [data-reveal-delay="2"] { transition-delay: .16s; } .anim-ready [data-reveal-delay="3"] { transition-delay: .24s; } .anim-ready [data-reveal-delay="4"] { transition-delay: .32s; } /* Stagger groups: children animate in sequence (delays set inline by JS) */ .anim-ready [data-stagger] > * { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .anim-ready [data-stagger].in > * { opacity: 1; transform: none; } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad); } /* ---- Custom cursor (pointer devices) ---- */ @media (pointer: fine) { .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; will-change: transform; } .cursor-dot { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; transition: width .25s, height .25s; } .cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.6); margin: -18px 0 0 -18px; transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, opacity .3s; } body.cursor-hover .cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--accent-2); } body.cursor-hover .cursor-dot { width: 0; height: 0; } @media (hover: hover) { a, button, [data-cursor="link"] { cursor: none; } } } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; } .hero-canvas-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .bento .card { display: flex; flex-direction: column; } .bento .b-4 { grid-column: span 4; } .bento .b-6 { grid-column: span 6; } .bento .tall { grid-row: span 2; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .b-3, .bento .b-4, .bento .b-6 { grid-column: span 2; } .bento .b-2 { grid-column: span 1; } .bento .tall { grid-row: auto; } } [data-tilt] { transition: transform .3s var(--ease); transform-style: preserve-3d; } /* ---- Tech / platform logo strip ---- */ .logo-strip { border-block: 1px solid var(--border); padding-block: 30px; } .logo-strip .marquee-track { gap: 64px; align-items: center; animation-duration: 46s; } .logo-strip svg, .logo-strip img { height: 30px; width: auto; opacity: .55; filter: grayscale(1) brightness(1.6); transition: opacity .3s, filter .3s; } .logo-strip .marquee-track > *:hover svg { opacity: 1; filter: none; } .logo-chip { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); font-family: var(--font-display); font-weight: 600; white-space: nowrap; font-size: 1.05rem; } .logo-chip svg { height: 26px; width: 26px; opacity: .8; } /* ---- Process timeline ---- */ .timeline { position: relative; display: grid; gap: 0; } .timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent-3), var(--accent), var(--accent-2)); opacity: .4; } .tl-item { position: relative; padding: 0 0 38px 64px; } .tl-item:last-child { padding-bottom: 0; } .tl-item .node { position: absolute; left: 8px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); display: grid; place-items: center; } .tl-item .node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); } .tl-item .step-n { font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; color: var(--accent); } .tl-item h3 { margin: 6px 0 8px; font-size: 1.25rem; } .tl-item p { color: var(--text-soft); max-width: 60ch; } .post-card .thumb .mesh { position: absolute; inset: -20%; filter: blur(26px); opacity: .7; transition: transform .6s var(--ease); } .post-card:hover .thumb .mesh { transform: scale(1.12) rotate(6deg); } /* ---- Industries ---- */ .ind-card { position: relative; overflow: hidden; } .ind-card .num { position: absolute; top: 18px; right: 22px; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: rgba(255,255,255,.05); } /* ========================================================================== SIGNATURE LAYER — "the site is the product demo" Engineering-console aesthetic: mono labels, terminal, editorial index. ========================================================================== */ :root { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---- Mono micro-labels ---- */ .mlabel { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); display: flex; align-items: center; gap: 14px; } .mlabel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); } .anim-ready .mlabel-glyph { opacity: 0; transform: translateY(8px) scale(.8); transform-origin: left center; transition: opacity .6s var(--ease), transform .6s var(--ease); } .anim-ready .mlabel.in .mlabel-glyph { opacity: 1; transform: none; } /* ---- Hero split ---- */ .hero-split { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; } } /* ---- Deploy console ---- */ .console { position: relative; border-radius: 16px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, #0d1019, #090b12); box-shadow: var(--shadow), 0 0 80px -30px rgba(109,139,255,.35); overflow: hidden; font-family: var(--mono); font-size: .82rem; } .console::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); opacity: .35; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .console-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); } .console-bar .dot { width: 11px; height: 11px; border-radius: 50%; } .console-bar .dot:nth-child(1){ background:#ff5f57 } .console-bar .dot:nth-child(2){ background:#febc2e } .console-bar .dot:nth-child(3){ background:#28c840 } .console-bar .title { margin-left: 10px; color: var(--text-mute); font-size: .74rem; letter-spacing: .08em; } .console-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-2); font-size: .7rem; letter-spacing: .14em; } .console-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: pulse 2s infinite; } .console-body { padding: 18px 18px 16px; min-height: 264px; display: flex; flex-direction: column; gap: 7px; } .console-body .ln { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-word; color: var(--text-soft); min-height: 1.25em; } .console-body .ln .p { color: var(--accent); flex: none; } .console-body .ln.ok { color: var(--accent-2); } .console-body .ln.dim { color: var(--text-mute); } .console-body .caret { display: inline-block; width: 8px; height: 1.05em; background: var(--accent-2); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .console-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); } .console-meta > div { padding: 13px 16px; border-right: 1px solid var(--border); } .console-meta > div:last-child { border-right: 0; } .console-meta .k { font-size: .62rem; letter-spacing: .18em; color: var(--text-mute); text-transform: uppercase; } .console-meta .v { font-size: .86rem; color: var(--text); margin-top: 3px; } .console-meta .v.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .manifesto .w { color: rgba(244,246,251,.16); transition: color .35s; } .manifesto .w.lit { color: var(--text); } .manifesto .w.hl.lit { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .blueprint .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; } /* ---- Browser-frame work mockups ---- */ .bframe { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: #0c0f17; transition: transform .45s var(--ease), box-shadow .45s; } .work-card:hover .bframe { transform: translateY(-4px) scale(1.015); box-shadow: 0 30px 60px -30px rgba(109,139,255,.4); } .bframe .bf-bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--border); } .bframe .bf-bar .d { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.14); } .bframe .bf-bar .url { flex: 1; height: 16px; border-radius: 5px; background: rgba(255,255,255,.05); margin-left: 6px; font-family: var(--mono); font-size: .56rem; color: var(--text-mute); display: flex; align-items: center; padding: 0 8px; letter-spacing: .06em; } .bframe .bf-body { padding: 14px; display: grid; gap: 8px; min-height: 150px; } .sk { border-radius: 6px; background: rgba(255,255,255,.05); } .sk.brand { height: 22px; width: 40%; background: var(--grad-soft); border: 1px solid var(--border); } .sk.row { height: 10px; } .sk.row.w60 { width: 60%; } .sk.row.w80 { width: 80%; } .sk.row.w45 { width: 45%; } .sk.chart { height: 56px; background: linear-gradient(180deg, transparent 62%, rgba(67,231,208,.10) 62%), repeating-linear-gradient(90deg, rgba(109,139,255,.13) 0 9px, transparent 9px 20px); border: 1px solid var(--border); } .sk.pill-row { display: flex; gap: 6px; background: none; } .sk.pill-row i { height: 14px; flex: 1; border-radius: 100px; background: rgba(255,255,255,.06); } .sk.pill-row i:first-child { background: var(--grad-soft); } .card:hover .ghost-n { opacity: 1; filter: drop-shadow(0 0 18px rgba(109,139,255,.45)); } #techverse { display: block; } #tv-tip { position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .2s; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--text); background: rgba(10,12,20,.92); border: 1px solid var(--border-strong); padding: 5px 12px; border-radius: 100px; white-space: nowrap; z-index: 3; } .tv-filter { display: flex; gap: 8px; flex-wrap: wrap; } .tv-filter button { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px; transition: color .25s, border-color .25s, background .25s; } .tv-filter button:hover { color: var(--text); border-color: var(--border-strong); } .tv-filter button.on { color: #07090f; background: var(--grad); border-color: transparent; font-weight: 700; } .tv-more { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-mute); line-height: 2; } .tv-more b { color: var(--text-soft); font-weight: 500; } /* ---- Floating contact actions ---- */ .fab { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .fab a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .fab .fab-wa { width: 46px; height: 46px; border-radius: 50%; background: #12351f; border: 1px solid rgba(37,211,102,.4); color: #25d366; justify-content: center; transition: transform .3s var(--ease), box-shadow .3s; } .fab .fab-wa svg { width: 22px; height: 22px; } .fab .fab-wa:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(37,211,102,.5); } .fab .fab-main { padding: 13px 20px; border-radius: 100px; background: var(--grad); color: #07090f; font-weight: 700; font-size: .92rem; box-shadow: 0 12px 32px -10px rgba(109,139,255,.65); transition: transform .3s var(--ease), box-shadow .3s; } .fab .fab-main svg { width: 18px; height: 18px; } .fab .fab-main:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(109,139,255,.8); } @media (max-width: 560px) { .fab .fab-main span { display: none; } .fab .fab-main { padding: 13px; } } /* ---- Stack matrix (categorized counter-scrolling tech wall) ---- */ .stack-matrix { display: grid; gap: 0; border-block: 1px solid var(--border); } .sm-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; border-bottom: 1px solid var(--border); } .sm-row:last-child { border-bottom: 0; } .sm-row .sm-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); padding: 0 16px; border-right: 1px solid var(--border); height: 100%; display: flex; align-items: center; } .sm-row .marquee { padding-block: 15px; } .sm-row .marquee-track { gap: 34px; animation-duration: 60s; } .sm-row:nth-child(even) .marquee-track { animation-direction: reverse; } .sm-row .marquee-track span { font-family: var(--mono); font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--text-soft); white-space: nowrap; } .sm-row .marquee-track span::before { content: "▪ "; color: var(--accent-2); opacity: .6; font-size: .6rem; vertical-align: 1px; } .sm-row:hover .sm-label { color: var(--accent-2); } @media (max-width: 640px) { .sm-row { grid-template-columns: 92px 1fr; } .sm-row .sm-label { font-size: .56rem; padding: 0 10px; } } /* ---- Ticker tape ---- */ .ticker { font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); } .ticker b { color: var(--accent-2); font-weight: 500; } #outcome-line { transition: opacity .4s; } /* ---- Skeleton shimmer + animated chart (work mockups feel alive) ---- */ .sk { position: relative; overflow: hidden; } .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: sk-shimmer 2.6s infinite; } @keyframes sk-shimmer { 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .work-card .sk.chart { background-size: 100% 200%, 100% 100%; } .work-card:hover .sk.chart { animation: chart-pulse 1.2s var(--ease); } @keyframes chart-pulse { 0% { filter: brightness(1); } 40% { filter: brightness(1.8); } 100% { filter: brightness(1); } } /* ---- Radar / globe consoles ---- */ .viz-body { padding: 10px; } .viz-body canvas { display: block; width: 100%; height: clamp(260px, 34vw, 380px); } .heatmap .l1 { background: rgba(109,139,255,.18); } .heatmap .l2 { background: rgba(109,139,255,.38); } .heatmap .l3 { background: rgba(109,139,255,.65); } .heatmap .l4 { background: var(--accent-2); box-shadow: 0 0 6px rgba(67,231,208,.5); } /* When live chat is enabled, lift our FAB above the chat bubble */ body.has-livechat .fab { bottom: 100px; } /* reCAPTCHA v3 badge would collide with our bottom-right FAB; hidden per Google's terms since the required attribution text is shown in the contact form note instead. */ .grecaptcha-badge { visibility: hidden; } .est-time { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .est-note { font-size: .85rem; color: var(--text-mute); } .df-code { position: relative; z-index: 1; border-left: 2px solid var(--tc, var(--accent)); padding: 10px 0 10px 12px; display: grid; gap: 7px; background: rgba(255,255,255,.03); border-radius: 0 6px 6px 0; } .df-code i { display: block; height: 6px; width: 90%; border-radius: 3px; background: rgba(140,165,235,.22); } .df-code i:nth-child(2) { background: rgba(67,231,208,.24); } .df-code i:nth-child(3) { background: rgba(176,120,255,.22); } .df-code i:nth-child(4) { background: rgba(140,165,235,.14); } .post-card:hover .df-code i { filter: brightness(1.35); transition: filter .4s; } /* Keyboard open on mobile: fixed elements would float mid-screen */ body.kb-open .scroll-progress, body.kb-open .fab { display: none; } /* Small-screen refinements */ @media (max-width: 560px) { .console-meta { grid-template-columns: 1fr 1fr 1fr; } .console-meta > div { padding: 10px 10px; } .console-meta .v { font-size: .78rem; } .est-label { min-width: 100%; } .est-use { width: 100%; justify-content: center; } } .ind-ui { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0c0f17; padding: 16px; min-height: 118px; display: flex; flex-direction: column; gap: 10px; justify-content: center; position: relative; overflow: hidden; } .iu-row { display: flex; align-items: center; gap: 10px; } .iu-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .iu-row b { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--accent-2); font-weight: 500; } .iu-chip { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; color: var(--text-mute); border: 1px solid var(--border); border-radius: 100px; padding: 4px 10px; width: fit-content; } .iu-chip.ok { color: var(--accent-2); border-color: rgba(67,231,208,.3); animation: iu-pulse 2.6s infinite; } @keyframes iu-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(67,231,208,.25); } 50% { box-shadow: 0 0 0 5px rgba(67,231,208,0); } } .iu-fin .iu-row { position: relative; padding: 4px 7px; margin: 0 -7px; border-radius: 6px; } .iu-fin .iu-row b { color: var(--accent-2); } .iu-fin .iu-row::before { content: ""; position: absolute; inset: 0; border-radius: 6px; opacity: 0; background: linear-gradient(90deg, rgba(67,231,208,.16), rgba(109,139,255,.05) 70%, transparent); animation: iu-recon 4s var(--ease) infinite; } .iu-fin .iu-row:nth-child(2)::before { animation-delay: .45s; } .iu-fin .iu-row:nth-child(3)::before { animation-delay: .9s; } @keyframes iu-recon { 0%, 55%, 100% { opacity: 0; } 8%, 24% { opacity: 1; } } .iu-ecg { width: 100%; height: 48px; } .iu-ecg path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: iu-ecg 3.2s linear infinite; filter: drop-shadow(0 0 5px rgba(67,231,208,.6)); } @keyframes iu-ecg { to { stroke-dashoffset: -320; } } .iu-steps { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; } .iu-steps .iu-step { color: var(--text-mute); } .iu-steps .iu-step.on { color: var(--text); } .iu-steps .iu-step.ship { color: var(--accent-2); } .iu-steps i { flex: 1; height: 1px; background: var(--border-strong); } .iu-chart { display: flex; align-items: flex-end; gap: 7px; height: 58px; } .iu-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), rgba(109,139,255,.15)); height: var(--h); transform-origin: bottom; animation: iu-grow 3s var(--ease) infinite; } .iu-chart i:nth-child(2){animation-delay:.12s} .iu-chart i:nth-child(3){animation-delay:.24s} .iu-chart i:nth-child(4){animation-delay:.36s} .iu-chart i:nth-child(5){animation-delay:.48s} .iu-chart i:nth-child(6){animation-delay:.6s; background: linear-gradient(180deg, var(--accent-2), rgba(67,231,208,.15));} @keyframes iu-grow { 0% { transform: scaleY(.3); opacity: .4; } 45%,85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.3); opacity: .4; } } @keyframes iu-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Footer live status ---- */ .foot-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 40px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-mute); border: 1px solid var(--border); border-radius: 100px; padding: 10px 18px; width: fit-content; } .foot-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: pulse 2.2s infinite; flex: none; } /* ---- Article pages ---- */ .article h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 38px 0 14px; } .article p { color: var(--text-soft); margin-bottom: 16px; max-width: 72ch; } .article p b { color: var(--text); } .article ul { margin: 0 0 18px 0; padding: 16px 20px; list-style: none; border-left: 2px solid var(--accent); background: rgba(109,139,255,.05); border-radius: 0 10px 10px 0; display: grid; gap: 8px; } .article ul li { color: var(--text-soft); font-size: .95rem; } .article ul li::before { content: "\2192 "; color: var(--accent-2); font-family: var(--mono); } /* ---- Small contextual minis inside cards ---- */ .ind-ui.sm { min-height: 0; padding: 12px 14px; gap: 8px; margin-top: 18px; } /* ---- CTA band: roaming ambient glow ---- */ .cta-band .cta-roam { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .5; background: radial-gradient(circle, rgba(109,139,255,.45), rgba(67,231,208,.2) 55%, transparent 70%); animation: cta-roam 16s ease-in-out infinite; top: -20%; left: -10%; } @keyframes cta-roam { 0%, 100% { top: -20%; left: -10%; } 30% { top: 30%; left: 70%; } 60% { top: 60%; left: 10%; } 80% { top: -10%; left: 45%; } } /* utilities */ .center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; } /* Visually hidden but present for screen readers and the document's heading outline - used for section h2s that would otherwise duplicate visible copy. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }