/* ============================================================= KutkiTech — Design Tokens Palette: deep navy base, electric blue + circuit green accents, a single purple used only in the hero network signature. Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data) ============================================================= */ :root { --kt-bg: #090D18; --kt-bg-alt: #0D1424; --kt-panel: #111A2E; --kt-panel-2: #14203A; --kt-border: rgba(255,255,255,.09); --kt-border-2: rgba(255,255,255,.14); --kt-text: #EAEEFB; --kt-text-dim: #9BA6C4; --kt-text-dim-2:#6C7796; --kt-heading: #FFFFFF; --kt-blue: #3B7AFE; --kt-blue-2: #6FA0FF; --kt-green: #33D6A6; --kt-purple: #8C7BF6; --kt-grad-brand: linear-gradient(120deg, var(--kt-blue) 0%, var(--kt-green) 100%); --kt-grad-glow: radial-gradient(circle, rgba(59,122,254,.35), transparent 70%); --kt-veil-1: rgba(255,255,255,.015); --kt-veil-2: rgba(255,255,255,.02); --kt-veil-3: rgba(255,255,255,.03); --kt-veil-4: rgba(255,255,255,.05); --kt-star-empty: rgba(255,255,255,.15); --kt-header-bg: rgba(9,13,24,0); --kt-header-bg-scrolled: rgba(9,13,24,.82); --kt-mobile-nav-bg: rgba(9,13,24,.98); --kt-map-filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%); --kt-font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --kt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --kt-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; --kt-radius-sm: 10px; --kt-radius: 16px; --kt-radius-lg: 24px; --kt-container: 1220px; --kt-header-h: 84px; --kt-ease: cubic-bezier(.22,1,.36,1); color-scheme: dark; } /* ============================================================= Light mode — toggled via [data-theme="light"] on , set by inline anti-flash script (header.php) + main.js ============================================================= */ :root[data-theme="light"] { --kt-bg: #F5F7FB; --kt-bg-alt: #ECF0F8; --kt-panel: #FFFFFF; --kt-panel-2: #F4F7FC; --kt-border: rgba(15,23,42,.10); --kt-border-2: rgba(15,23,42,.16); --kt-text: #2B3242; --kt-text-dim: #5B6478; --kt-text-dim-2:#7C879E; --kt-heading: #0B1120; --kt-blue-2: #2A63E8; --kt-veil-1: rgba(15,23,42,.02); --kt-veil-2: rgba(15,23,42,.03); --kt-veil-3: rgba(15,23,42,.04); --kt-veil-4: rgba(15,23,42,.06); --kt-star-empty: rgba(15,23,42,.18); --kt-header-bg: rgba(245,247,251,0); --kt-header-bg-scrolled: rgba(245,247,251,.86); --kt-mobile-nav-bg: rgba(245,247,251,.98); --kt-map-filter: none; color-scheme: light; } /* Smooth dark/light theme switching. Components with their own transition list (cards, buttons, etc.) declare background-color/border-color/color directly in that list — a second `transition` rule here would be silently overridden rather than merged, since transition is a shorthand. This rule only needs to cover elements that don't declare their own transition, which in practice is almost all plain text and a few simple containers. */ body, .kt-site-header, .kt-primary-nav, .kt-download-row, .kt-testimonial-card, .kt-form-field input, .kt-form-field textarea, h1, h2, h3, h4, h5, p, span, li, label, td, th { transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease), color .3s var(--kt-ease); } /* ============================================================= Reset ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--kt-header-h); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--kt-bg); color: var(--kt-text); font-family: var(--kt-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } /* Icon sizing — kt_icon() SVGs ship without width/height attributes, so without this rule browsers fall back to their default replaced-element size (huge). */ svg.kt-icon { width: 22px; height: 22px; flex-shrink: 0; } svg.kt-icon-sm { width: 16px; height: 16px; flex-shrink: 0; } svg.kt-icon-xs { width: 13px; height: 13px; flex-shrink: 0; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5 { font-family: var(--kt-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--kt-heading); } p { margin: 0 0 1em; color: var(--kt-text-dim); } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; appearance: none; -webkit-appearance: none; } input, textarea { font-family: inherit; } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; } .skip-link { top: -50px; left: 10px; position: fixed; z-index: 10000; background: var(--kt-blue); color: #fff; padding: 10px 18px; border-radius: 8px; transition: top .2s; } .skip-link:focus { top: 10px; position: fixed; clip: auto; width: auto; height: auto; } :focus-visible { outline: 2px solid var(--kt-blue-2); outline-offset: 3px; border-radius: 4px; } .kt-container { max-width: var(--kt-container); margin: 0 auto; padding: 0 28px; position: relative; } .kt-noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ============================================================= Header / Nav ============================================================= */ .kt-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--kt-header-h); display: flex; align-items: center; background: var(--kt-header-bg); border-bottom: 1px solid transparent; transition: background .35s var(--kt-ease), border-color .35s var(--kt-ease), height .3s var(--kt-ease); } .kt-site-header.is-scrolled { background: var(--kt-header-bg-scrolled); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--kt-border); height: 72px; } /* backdrop-filter creates a new containing block for position:fixed descendants — without this, the fixed mobile nav panel (a descendant of the header) would position itself relative to the header's own small box instead of the viewport as soon as the header is scrolled and gains backdrop-filter, collapsing the open menu to near-zero visible height. */ .kt-site-header.kt-nav-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .kt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .kt-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .kt-logo-mark { color: var(--kt-blue-2); display: flex; } .kt-logo-mark svg { filter: drop-shadow(0 0 10px rgba(59,122,254,.45)); } .kt-logo-text { font-family: var(--kt-font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem); color: var(--kt-heading); letter-spacing: -.01em; white-space: nowrap; } .kt-logo-text span { color: var(--kt-green); } .custom-logo { max-height: 52px; width: auto; } .kt-primary-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; } .kt-primary-nav::-webkit-scrollbar { display: none; } .kt-primary-nav .nav-menu { display: flex; align-items: center; gap: clamp(0px, 0.4vw, 6px); } .kt-primary-nav .nav-menu > li { flex-shrink: 0; } .kt-primary-nav .nav-menu > li > a { display: inline-block; white-space: nowrap; padding: 10px clamp(9px, 0.5vw + 6px, 16px); font-size: clamp(0.82rem, 0.7rem + 0.45vw, 0.945rem); font-weight: 500; color: var(--kt-text-dim); position: relative; border-radius: 999px; transition: color .25s, background .25s; } .kt-primary-nav .nav-menu > li > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--kt-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--kt-ease); } .kt-primary-nav .nav-menu > li > a:hover, .kt-primary-nav .nav-menu > li > a:focus-visible { color: var(--kt-heading); } .kt-primary-nav .nav-menu > li > a:hover::after, .kt-primary-nav .nav-menu > li > a:focus-visible::after, .kt-primary-nav .nav-menu > li.current-menu-item > a::after { transform: scaleX(1); } .kt-primary-nav .nav-menu > li.current-menu-item > a { color: var(--kt-heading); } .kt-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .kt-theme-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kt-border-2); background: var(--kt-veil-2); color: var(--kt-text-dim); flex-shrink: 0; transition: color .25s, border-color .25s, background .25s, transform .25s var(--kt-ease); } .kt-theme-toggle:hover { color: var(--kt-heading); border-color: var(--kt-blue-2); transform: rotate(-8deg); } .kt-theme-toggle .kt-theme-icon-moon { display: block; } .kt-theme-toggle .kt-theme-icon-sun { display: none; } :root[data-theme="light"] .kt-theme-toggle .kt-theme-icon-moon { display: none; } :root[data-theme="light"] .kt-theme-toggle .kt-theme-icon-sun { display: block; } .kt-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--kt-border-2); border-radius: 10px; background: var(--kt-veil-3); align-items: center; transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease); } .kt-menu-toggle span { width: 18px; height: 2px; background: var(--kt-heading); border-radius: 2px; transition: transform .3s var(--kt-ease), opacity .2s, background-color .3s var(--kt-ease); } .kt-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .kt-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .kt-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================= Buttons ============================================================= */ .kt-btn { display: inline-flex; align-items: center; gap: 9px; justify-content: center; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--kt-ease), box-shadow .25s, background .25s, color .25s, border-color .25s; position: relative; overflow: hidden; } .kt-btn svg { width: 16px; height: 16px; transition: transform .3s var(--kt-ease); } .kt-btn:hover svg { transform: translateX(3px); } .kt-btn-primary { background: var(--kt-grad-brand); color: #051019; box-shadow: 0 8px 24px -8px rgba(51,214,166,.45); } .kt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(59,122,254,.55); } .kt-btn-ghost { color: var(--kt-text); border-color: var(--kt-border-2); background: var(--kt-veil-2); } .kt-btn-ghost:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); background: rgba(59,122,254,.08); } .kt-btn-outline { color: var(--kt-text); border-color: var(--kt-border-2); background: transparent; } .kt-btn-outline:hover { border-color: var(--kt-green); color: var(--kt-green); background: var(--kt-veil-2); } .kt-btn-sm { padding: 9px 18px; font-size: .85rem; } .kt-btn-lg { padding: 16px 30px; font-size: 1rem; } .kt-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; } .kt-link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--kt-green); font-weight: 600; } .kt-link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--kt-ease); } .kt-link-arrow:hover svg { transform: translateX(4px); } /* ============================================================= Hero ============================================================= */ .kt-hero { position: relative; padding: calc(var(--kt-header-h) + 96px) 0 0; overflow: hidden; isolation: isolate; } #kt-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .75; } .kt-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; } .kt-hero-glow-1 { width: 560px; height: 560px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(59,122,254,.32), transparent 70%); } .kt-hero-glow-2 { width: 460px; height: 460px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(140,123,246,.22), transparent 70%); } .kt-hero-inner { max-width: 780px; text-align: left; padding-bottom: 64px; } .kt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kt-font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kt-green); padding: 6px 14px; border: 1px solid rgba(51,214,166,.3); border-radius: 999px; background: rgba(51,214,166,.06); } .kt-hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); margin: 22px 0 20px; } .kt-text-gradient { background: var(--kt-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .kt-hero-desc { max-width: 620px; font-size: 1.1rem; color: var(--kt-text-dim); } .kt-hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; } .kt-hero-stats { border-top: 1px solid var(--kt-border); background: var(--kt-veil-1); backdrop-filter: blur(6px); } .kt-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .kt-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--kt-border); } .kt-stat:last-child { border-right: none; } .kt-stat-num { display: block; font-family: var(--kt-font-mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--kt-heading); } .kt-stat-label { display: block; margin-top: 6px; font-size: .85rem; color: var(--kt-text-dim); } /* ============================================================= Sections ============================================================= */ .kt-main { position: relative; z-index: 2; } .kt-section { padding: 100px 0; } .kt-section-panel { background: linear-gradient(180deg, var(--kt-bg-alt), var(--kt-bg)); border-top: 1px solid var(--kt-border); border-bottom: 1px solid var(--kt-border); } .kt-section-heading { max-width: 680px; margin: 0 auto 56px; } .kt-section-heading.align-center { text-align: center; } .kt-section-heading.align-left { text-align: left; margin-left: 0; } .kt-section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; } .kt-section-heading p { font-size: 1.05rem; margin-top: 10px; } .kt-lead { font-size: 1.08rem; color: var(--kt-text-dim); } .kt-highlight { color: var(--kt-heading); font-family: var(--kt-font-display); font-size: 1.2rem; padding-left: 18px; border-left: 3px solid var(--kt-green); } /* Page header (interior pages) */ .kt-page-header { padding: calc(var(--kt-header-h) + 76px) 0 60px; text-align: left; position: relative; } .kt-page-header h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-top: 16px; } .kt-page-subtitle { max-width: 620px; font-size: 1.08rem; } /* ============================================================= Services grid ============================================================= */ .kt-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .kt-service-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 32px 26px; transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background .35s var(--kt-ease), color .35s var(--kt-ease); } .kt-service-card:hover { transform: translateY(-6px); border-color: rgba(59,122,254,.4); background: var(--kt-panel-2); } .kt-service-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(59,122,254,.18), rgba(51,214,166,.14)); color: var(--kt-blue-2); margin-bottom: 18px; } .kt-service-icon svg { width: 24px; height: 24px; } .kt-service-card h3 { font-size: 1.15rem; margin-bottom: 8px; } .kt-service-card p { font-size: .95rem; margin: 0; } .kt-service-card-lg .kt-service-body { font-size: .95rem; } /* ============================================================= Why choose us ============================================================= */ .kt-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .kt-why-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 12px; } .kt-why-list { display: grid; gap: 18px; } .kt-why-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--kt-radius-sm); border: 1px solid var(--kt-border); background: var(--kt-veil-1); transition: border-color .3s, background .3s; } .kt-why-item:hover { border-color: rgba(51,214,166,.35); background: rgba(51,214,166,.04); } .kt-why-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--kt-green); margin-top: 2px; } .kt-why-item h4 { font-size: 1rem; margin-bottom: 4px; } .kt-why-item p { font-size: .9rem; margin: 0; } /* ============================================================= Testimonials ============================================================= */ .kt-testimonial-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .kt-testimonial-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 30px; display: flex; flex-direction: column; gap: 14px; } .kt-quote-icon { width: 30px; height: 30px; color: var(--kt-purple); opacity: .8; } .kt-stars { display: flex; gap: 3px; } .kt-star { fill: var(--kt-star-empty); color: transparent; } .kt-star.is-filled { fill: #FFC94D; } .kt-testimonial-quote { color: var(--kt-text); font-size: .98rem; flex-grow: 1; } .kt-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--kt-border); transition: border-color .3s var(--kt-ease); } .kt-avatar-initials { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kt-grad-brand); color: #051019; font-weight: 700; font-family: var(--kt-font-display); flex-shrink: 0; } .kt-avatar-lg { width: 84px; height: 84px; font-size: 1.4rem; } .kt-avatar-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .kt-testimonial-author strong { display: block; font-size: .92rem; color: var(--kt-heading); } .kt-testimonial-author span { font-size: .82rem; color: var(--kt-text-dim); } /* ============================================================= FAQ Accordion ============================================================= */ .kt-faq-wrap { max-width: 820px; } .kt-accordion-item { border-bottom: 1px solid var(--kt-border); transition: border-color .3s var(--kt-ease); } .kt-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: none; color: var(--kt-heading); text-align: left; padding: 22px 4px; font-family: var(--kt-font-display); font-size: 1.05rem; font-weight: 600; } .kt-accordion-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; } .kt-accordion-icon::before, .kt-accordion-icon::after { content: ''; position: absolute; background: var(--kt-green); border-radius: 2px; transition: transform .3s var(--kt-ease); } .kt-accordion-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); } .kt-accordion-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } .kt-accordion-trigger[aria-expanded="true"] .kt-accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .kt-accordion-panel { overflow: hidden; padding-bottom: 22px; } .kt-accordion-panel p { font-size: .96rem; margin: 0; } /* ============================================================= CTA ============================================================= */ .kt-cta { padding: 90px 0; position: relative; } .kt-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; padding: 60px 40px; border-radius: var(--kt-radius-lg); background: linear-gradient(135deg, rgba(59,122,254,.16), rgba(51,214,166,.10)); border: 1px solid rgba(59,122,254,.28); position: relative; overflow: hidden; } .kt-cta-inner::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 1px; background: var(--kt-grad-brand); opacity: .35; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .kt-cta-inner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .kt-cta-inner .kt-btn { margin-top: 20px; } /* ============================================================= Footer ============================================================= */ .kt-site-footer { position: relative; padding: 80px 0 0; background: var(--kt-bg-alt); border-top: 1px solid var(--kt-border); overflow: hidden; transition: background-color .3s var(--kt-ease), border-color .3s var(--kt-ease); } .kt-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; } .kt-footer-tagline { font-size: .92rem; margin: 18px 0 20px; max-width: 280px; } .kt-footer-tagline em { color: var(--kt-green); font-style: normal; } .footer-widget-title { font-size: .95rem; color: var(--kt-heading); margin-bottom: 18px; } .kt-footer-col ul li { margin-bottom: 11px; } .kt-footer-col ul a { font-size: .9rem; color: var(--kt-text-dim); transition: color .2s; } .kt-footer-col ul a:hover { color: var(--kt-green); } .kt-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: .88rem; color: var(--kt-text-dim); } .kt-footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--kt-blue-2); } .kt-footer-contact a { color: var(--kt-text-dim); } .kt-footer-contact a:hover { color: var(--kt-heading); } .kt-social-links { display: flex; gap: 10px; } .kt-social-links a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kt-border-2); display: flex; align-items: center; justify-content: center; color: var(--kt-text-dim); transition: all .25s; } .kt-social-links a:hover { color: #051019; background: var(--kt-grad-brand); border-color: transparent; } .kt-social-links svg { width: 17px; height: 17px; } .kt-social-links-lg a { width: 46px; height: 46px; } .kt-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-top: 1px solid var(--kt-border); font-size: .84rem; color: var(--kt-text-dim-2); transition: border-color .3s var(--kt-ease), color .3s var(--kt-ease); } .kt-footer-bottom p { margin: 0; } .kt-footer-legal { display: flex; gap: 22px; } .kt-footer-legal a:hover { color: var(--kt-green); } .kt-footer-wave { position: absolute; top: -1px; left: 0; right: 0; height: 140px; background: var(--kt-grad-glow); opacity: .5; pointer-events: none; } .kt-back-to-top { position: fixed; right: 26px; bottom: 26px; z-index: 400; width: 46px; height: 46px; border-radius: 50%; background: var(--kt-grad-brand); color: #051019; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(51,214,166,.5); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s var(--kt-ease); } .kt-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ============================================================= About page ============================================================= */ .kt-about-intro { max-width: 780px; } .kt-values-grid, .kt-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .kt-value-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 26px; transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease); } .kt-value-card:hover { transform: translateY(-4px); border-color: rgba(51,214,166,.35); } .kt-value-card svg { width: 26px; height: 26px; color: var(--kt-blue-2); margin-bottom: 14px; } .kt-value-card h4 { font-size: 1rem; margin-bottom: 6px; } .kt-value-card p { font-size: .9rem; margin: 0; } .kt-process-card { padding: 28px; border-radius: var(--kt-radius); background: var(--kt-veil-2); border: 1px solid var(--kt-border); } .kt-process-card p { color: var(--kt-text); font-size: 1rem; margin-top: 10px; } .kt-timeline { display: flex; flex-direction: column; gap: 0; max-width: 780px; border-left: 2px solid var(--kt-border); } .kt-timeline-item { position: relative; padding: 0 0 40px 32px; } .kt-timeline-item:last-child { padding-bottom: 0; } .kt-timeline-item::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--kt-grad-brand); box-shadow: 0 0 0 4px var(--kt-bg); } .kt-timeline-year { display: inline-block; font-family: var(--kt-font-mono); font-weight: 600; color: var(--kt-green); font-size: 1.05rem; margin-bottom: 6px; } .kt-timeline-item p { margin: 0; font-size: .98rem; } /* ============================================================= Services page extras ============================================================= */ .kt-services-grid-detailed { grid-template-columns: repeat(2, 1fr); } .kt-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .kt-tag { font-size: .88rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--kt-border-2); color: var(--kt-text-dim); background: var(--kt-veil-2); transition: all .2s; } .kt-tag:hover { color: var(--kt-heading); border-color: var(--kt-green); } /* ============================================================= Team ============================================================= */ .kt-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .kt-team-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); padding: 26px; text-align: center; transition: transform .3s var(--kt-ease), border-color .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease); } .kt-team-card:hover { transform: translateY(-5px); border-color: rgba(59,122,254,.4); } .kt-team-photo { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--kt-panel-2); } .kt-team-photo img { width: 100%; height: 100%; object-fit: cover; } .kt-team-card h3 { font-size: 1.02rem; margin-bottom: 4px; } .kt-team-role { font-size: .86rem; color: var(--kt-blue-2); margin-bottom: 10px; } .kt-team-bio { font-size: .85rem; color: var(--kt-text-dim); margin-bottom: 10px; } .kt-team-linkedin { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kt-border-2); align-items: center; justify-content: center; color: var(--kt-text-dim); } .kt-team-linkedin:hover { color: #051019; background: var(--kt-grad-brand); border-color: transparent; } .kt-admin-note { margin-top: 26px; padding: 16px 20px; border-radius: var(--kt-radius-sm); border: 1px dashed var(--kt-border-2); font-size: .88rem; color: var(--kt-text-dim); } /* ============================================================= Careers ============================================================= */ .kt-jobs-list { display: flex; flex-direction: column; gap: 16px; } .kt-job-card { display: flex; align-items: center; gap: 22px; padding: 26px; background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); transition: border-color .3s var(--kt-ease), transform .3s var(--kt-ease), background-color .3s var(--kt-ease), color .3s var(--kt-ease); } .kt-job-card:hover { border-color: rgba(51,214,166,.35); transform: translateY(-3px); } .kt-job-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(59,122,254,.12); display: flex; align-items: center; justify-content: center; color: var(--kt-blue-2); } .kt-job-icon svg { width: 24px; height: 24px; } .kt-job-info { flex-grow: 1; min-width: 0; } .kt-job-info h3 { font-size: 1.1rem; margin-bottom: 6px; } .kt-job-meta { display: flex; gap: 16px; font-size: .84rem; color: var(--kt-text-dim); margin-bottom: 8px; font-family: var(--kt-font-mono); } .kt-job-meta span { display: flex; align-items: center; gap: 5px; } .kt-job-desc p { font-size: .92rem; margin: 0; } /* ============================================================= Downloads ============================================================= */ .kt-downloads-list { display: flex; flex-direction: column; gap: 14px; } .kt-download-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); } .kt-download-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: rgba(140,123,246,.14); color: var(--kt-purple); display: flex; align-items: center; justify-content: center; } .kt-download-info { flex: 1 1 220px; min-width: 0; } .kt-download-info h3 { font-size: 1rem; margin-bottom: 2px; overflow-wrap: break-word; } .kt-download-info p { font-size: .86rem; margin: 0; overflow-wrap: break-word; } .kt-download-btn { flex-shrink: 0; } .kt-download-pending { flex-shrink: 0; font-size: .82rem; color: var(--kt-text-dim-2); font-style: italic; } /* ============================================================= Contact ============================================================= */ .kt-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; } .kt-contact-details { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; } .kt-contact-details li { display: flex; gap: 14px; align-items: flex-start; } .kt-contact-details svg { width: 24px; height: 24px; color: var(--kt-green); flex-shrink: 0; margin-top: 2px; } .kt-contact-details span:first-child { display: block; font-size: .8rem; color: var(--kt-text-dim-2); margin-bottom: 2px; } .kt-contact-details a, .kt-contact-details div span:last-child { color: var(--kt-heading); font-size: 1rem; } .kt-contact-form-wrap { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius-lg); padding: 36px; } .kt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .kt-form-field { margin-bottom: 18px; } .kt-form-field label { display: block; font-size: .85rem; color: var(--kt-text-dim); margin-bottom: 8px; } .kt-form-field input, .kt-form-field textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--kt-border-2); background: var(--kt-veil-3); color: var(--kt-heading); font-size: .95rem; transition: border-color .2s, background .2s; resize: vertical; } .kt-form-field input:focus, .kt-form-field textarea:focus { outline: none; border-color: var(--kt-blue-2); background: var(--kt-veil-4); } .kt-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .kt-form-submit { width: 100%; position: relative; } .kt-btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(5,16,25,.3); border-top-color: #051019; border-radius: 50%; animation: kt-spin .7s linear infinite; } @keyframes kt-spin { to { transform: rotate(360deg); } } .kt-form-status { margin-top: 14px; font-size: .9rem; min-height: 1.2em; } .kt-form-status.is-success { color: var(--kt-green); } .kt-form-status.is-error { color: #FF7A7A; } /* ============================================================= Our Work / Portfolio ============================================================= */ .kt-portfolio-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .kt-portfolio-filter { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--kt-border-2); background: var(--kt-veil-2); color: var(--kt-text-dim); font-size: .87rem; font-weight: 600; transition: background .25s, border-color .25s, color .25s, transform .25s var(--kt-ease); } .kt-portfolio-filter:hover { border-color: var(--kt-blue-2); color: var(--kt-heading); } .kt-portfolio-filter.is-active { background: var(--kt-grad-brand); color: #051019; border-color: transparent; transform: translateY(-1px); } .kt-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; } .kt-portfolio-card { position: relative; display: flex; flex-direction: column; border-radius: var(--kt-radius); overflow: hidden; background: var(--kt-panel); border: 1px solid var(--kt-border); transition: transform .35s var(--kt-ease), border-color .35s var(--kt-ease), background-color .35s var(--kt-ease), color .35s var(--kt-ease), opacity .35s var(--kt-ease), box-shadow .35s var(--kt-ease); } .kt-portfolio-card:hover { transform: translateY(-5px); border-color: rgba(59,122,254,.35); box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); } .kt-portfolio-card:hover, .kt-portfolio-card:focus-within { will-change: transform; } .kt-portfolio-card:hover .kt-device-screen img { will-change: transform; } .kt-portfolio-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; } .kt-portfolio-media { position: relative; padding: 30px 30px 0; background: linear-gradient(160deg, var(--kt-panel-2), var(--kt-bg-alt)); flex-shrink: 0; } /* Browser/laptop chassis frame around the screenshot */ .kt-device-frame { position: relative; border-radius: 10px 10px 3px 3px; overflow: hidden; background: linear-gradient(180deg, #1c2540, #10182a); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 26px 50px -26px rgba(0,0,0,.65); transition: transform .5s var(--kt-ease); } .kt-device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; } .kt-device-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); } .kt-device-dot:nth-child(1) { background: #ff5f57; } .kt-device-dot:nth-child(2) { background: #febc2e; } .kt-device-dot:nth-child(3) { background: #28c840; } .kt-device-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kt-bg); } .kt-device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s var(--kt-ease); } .kt-portfolio-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--kt-text-dim-2); } .kt-portfolio-placeholder svg { width: 34px; height: 34px; } /* "Laptop base" ledge beneath the browser chassis */ .kt-device-frame::after { content: ''; display: block; height: 9px; margin: 0 -6px; background: linear-gradient(180deg, #1c2540, #0a0f1e); border-radius: 0 0 8px 8px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); } .kt-portfolio-badge { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--kt-grad-brand); color: #051019; box-shadow: 0 8px 18px -8px rgba(51,214,166,.55); } .kt-portfolio-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 60px; height: 60px; border-radius: 50%; background: rgba(9,13,24,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--kt-ease), background .3s; } .kt-portfolio-play svg { width: 20px; height: 20px; margin-left: 3px; } .kt-portfolio-play:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--kt-blue); border-color: transparent; } /* pointer-events:none by default so the overlay never blocks clicks to what's underneath it (e.g. the video play button) — only its own interactive children opt back in. This matters most once the overlay expands to cover the whole card on hover (see the hover-mode block below). */ .kt-portfolio-overlay { position: relative; z-index: 1; padding: 26px 28px 26px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .kt-portfolio-overlay a { pointer-events: auto; } .kt-portfolio-client-logo { display: block; background: #fff; padding: 5px 12px; border-radius: 6px; height: 28px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: 12px; } .kt-portfolio-overlay h3 { font-size: 1.18rem; margin-bottom: 3px; } .kt-portfolio-client { display: block; font-size: .85rem; margin-bottom: 10px; } .kt-portfolio-desc { font-size: .92rem; line-height: 1.55; margin-bottom: 14px; } .kt-portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; margin-bottom: 6px; } .kt-portfolio-tag { display: inline-block; font-size: .74rem; padding: 4px 12px; border-radius: 999px; } .kt-portfolio-overlay .kt-link-arrow { font-size: .9rem; margin-top: 6px; } /* Static (touch / no-hover) context: the overlay sits in normal flow below the screenshot on the card's own background, so it should use the theme-aware text colors like the rest of the site. */ .kt-portfolio-client { color: var(--kt-blue-2); } .kt-portfolio-desc { color: var(--kt-text-dim); } .kt-portfolio-tag { background: var(--kt-veil-3); color: var(--kt-text-dim); } /* Desktop enhancement: turn the always-visible info panel into a hover-reveal overlay on devices that actually support hover, so mouse users get the richer "hover to see details" interaction while touch users keep the static, always-visible version below the image. */ @media (hover: hover) and (pointer: fine) { .kt-portfolio-card:hover .kt-device-frame { transform: translateY(-4px); } .kt-portfolio-card:hover .kt-device-screen img { transform: scale(1.08); } .kt-portfolio-overlay { position: absolute; inset: 0; padding-top: 45%; background: linear-gradient(180deg, transparent 0%, rgba(6,10,20,.68) 35%, rgba(6,10,20,.97) 100%); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--kt-ease), transform .35s var(--kt-ease); } .kt-portfolio-card:hover .kt-portfolio-overlay, .kt-portfolio-card:focus-within .kt-portfolio-overlay { opacity: 1; transform: translateY(0); } /* On this dark scrim, text must stay light regardless of site-wide theme — the background here is always dark (it's an image overlay, not a themed panel), so text tied to the light/dark text variables would go dark-on-dark and disappear in light mode. */ .kt-portfolio-overlay h3 { color: #fff; } .kt-portfolio-overlay .kt-portfolio-client { color: #8FC4FF; } .kt-portfolio-overlay .kt-portfolio-desc { color: rgba(255,255,255,.78); } .kt-portfolio-overlay .kt-portfolio-tag { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); } } /* Single project page layout */ .kt-project-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; margin-bottom: 56px; } .kt-device-frame-lg { max-width: 100%; } .kt-project-sidebar { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--kt-radius); background: var(--kt-panel); border: 1px solid var(--kt-border); position: sticky; top: calc(var(--kt-header-h) + 24px); } .kt-project-client-logo { max-height: 40px; width: auto; max-width: 160px; object-fit: contain; background: #fff; padding: 6px 12px; border-radius: 8px; align-self: flex-start; } .kt-project-meta-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--kt-border); } .kt-project-meta-row:last-of-type { border-bottom: none; padding-bottom: 0; } .kt-project-meta-row span { font-size: .78rem; color: var(--kt-text-dim-2); text-transform: uppercase; letter-spacing: .04em; } .kt-project-meta-row strong { font-size: .98rem; color: var(--kt-heading); font-weight: 600; } .kt-project-content { max-width: 760px; } /* Video lightbox modal */ .kt-video-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s var(--kt-ease), visibility 0s linear .3s; } .kt-video-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--kt-ease); } .kt-video-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .kt-video-modal-inner { position: relative; width: 100%; max-width: 960px; transform: scale(.94); transition: transform .3s var(--kt-ease); } .kt-video-modal.is-open .kt-video-modal-inner { transform: scale(1); } .kt-video-modal-close { position: absolute; top: -48px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--kt-panel); border: 1px solid var(--kt-border-2); color: var(--kt-heading); display: flex; align-items: center; justify-content: center; transition: border-color .2s; } .kt-video-modal-close:hover { border-color: var(--kt-blue-2); } .kt-video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kt-radius); overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); } .kt-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================= Blog / generic content ============================================================= */ .kt-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .kt-blog-card { background: var(--kt-panel); border: 1px solid var(--kt-border); border-radius: var(--kt-radius); overflow: hidden; padding-bottom: 22px; } .kt-blog-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; } .kt-blog-thumb img { width: 100%; height: 100%; object-fit: cover; } .kt-blog-card h3 { font-size: 1.05rem; padding: 20px 22px 6px; } .kt-blog-card p { padding: 0 22px; font-size: .9rem; } .kt-blog-card .kt-link-arrow { margin: 6px 22px 0; } .kt-pagination { margin-top: 40px; text-align: center; } .kt-prose { max-width: 780px; font-size: 1.02rem; } .kt-prose h2, .kt-prose h3 { margin-top: 1.6em; } .kt-404 { padding: 160px 0 140px; } .kt-404-code { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 14px 0; } /* ============================================================= Scroll reveal ============================================================= */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--kt-ease), transform .7s var(--kt-ease); transition-delay: calc(var(--d, 0) * 90ms); } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } .kt-form-field input[type="file"] { padding: 10px 14px; font-size: .88rem; color: var(--kt-text-dim); } .kt-form-field input[type="file"]::-webkit-file-upload-button { margin-right: 12px; padding: 7px 14px; border-radius: 999px; border: none; background: var(--kt-grad-brand); color: #051019; font-weight: 600; font-size: .82rem; cursor: pointer; } .kt-field-hint { font-weight: 400; color: var(--kt-text-dim-2); font-size: .78rem; } .kt-file-error { color: #FF7A7A; font-size: .82rem; margin: 8px 0 0; } .kt-form-field.has-error input, .kt-form-field.has-error input[type="file"] { border-color: #FF7A7A; } .kt-job-apply { margin-top: 20px; padding: 22px; border-radius: var(--kt-radius); background: var(--kt-veil-2); border: 1px solid var(--kt-border); } .kt-job-apply .kt-form-submit { width: auto; padding: 12px 26px; } .kt-apply-toggle[aria-expanded="true"] { border-color: var(--kt-green); color: var(--kt-green); } .kt-apply-toggle { flex-shrink: 0; } .kt-map-embed { border-radius: var(--kt-radius); overflow: hidden; border: 1px solid var(--kt-border); line-height: 0; } .kt-map-embed iframe { display: block; filter: var(--kt-map-filter); } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1080px) { .kt-services-grid { grid-template-columns: repeat(2, 1fr); } .kt-testimonial-track { grid-template-columns: repeat(2, 1fr); } .kt-team-grid { grid-template-columns: repeat(3, 1fr); } .kt-portfolio-grid { gap: 24px; } .kt-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .kt-primary-nav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--kt-mobile-nav-bg); backdrop-filter: blur(10px); transform: translateX(100%); transition: transform .4s var(--kt-ease); overflow-y: auto; padding: 20px 0; } .kt-primary-nav.is-open { transform: translateX(0); } .kt-primary-nav .nav-menu { flex-direction: column; align-items: stretch; padding: 20px 28px; gap: 4px; } .kt-primary-nav .nav-menu > li > a { display: block; padding: 16px 14px; font-size: 1.05rem; border-bottom: 1px solid var(--kt-border); border-radius: 0; } .kt-primary-nav .nav-menu > li > a::after { display: none; } .kt-menu-toggle { display: flex; } .kt-header-actions .kt-btn-primary.kt-btn-sm { display: none; } .kt-why-grid, .kt-contact-grid, .kt-project-layout { grid-template-columns: 1fr; gap: 36px; } .kt-project-sidebar { position: static; } .kt-values-grid, .kt-process-grid { grid-template-columns: repeat(2, 1fr); } .kt-services-grid-detailed { grid-template-columns: 1fr; } } @media (max-width: 720px) { .kt-stats-grid { grid-template-columns: 1fr; } .kt-stat { border-right: none; border-bottom: 1px solid var(--kt-border); } .kt-stat:last-child { border-bottom: none; } .kt-services-grid, .kt-testimonial-track, .kt-team-grid, .kt-blog-grid, .kt-portfolio-grid { grid-template-columns: 1fr; } .kt-values-grid, .kt-process-grid { grid-template-columns: 1fr; } .kt-footer-grid { grid-template-columns: 1fr; } .kt-form-row { grid-template-columns: 1fr; } .kt-job-card { flex-direction: column; align-items: flex-start; } .kt-download-row { flex-direction: column; align-items: stretch; text-align: center; } .kt-download-icon { margin: 0 auto; } .kt-download-info { text-align: center; } .kt-download-btn { width: 100%; justify-content: center; } .kt-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); } .kt-section { padding: 70px 0; } }