/* ========================================================================== WIS — Design Tokens ========================================================================== */ :root { /* Color */ --bg-primary: #0A0E17; --bg-primary-rgb: 10, 14, 23; --bg-secondary: #10151F; --bg-elevated: #161C29; --border: #232938; --border-soft: #1A2030; --text-primary: #EDEFF3; --text-muted: #8891A3; --text-faint: #565F73; --accent: #FFB020; --accent-dim: #4D3B14; --accent-glow: rgba(255, 176, 32, 0.15); --ok: #3DDC97; --on-accent: #14100A; /* Type */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Layout */ --max-width: 1200px; --radius: 3px; } /* Light theme — activated via [data-theme="light"] on */ [data-theme="light"] { --bg-primary: #F7F8FA; --bg-primary-rgb: 247, 248, 250; --bg-secondary: #FFFFFF; --bg-elevated: #EFF1F5; --border: #DEE2E9; --border-soft: #E8EAEF; --text-primary: #12151C; --text-muted: #5B6472; --text-faint: #8B93A6; --accent: #A15E06; --accent-dim: #FBEACD; --accent-glow: rgba(161, 94, 6, 0.10); --ok: #1F9D6C; --on-accent: #FFFFFF; } body, .site-header, .btn, .service-card, .status-panel, .form-group input, .form-group select, .form-group textarea { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; } html { scroll-behavior: smooth; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } img { max-width: 100%; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1px solid transparent; transition: all 0.18s ease; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: #ffc250; transform: translateY(-1px); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-primary); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); transition: border-color 0.15s ease, color 0.15s ease; } .btn-icon:hover { border-color: var(--accent); color: var(--accent); } .btn-icon svg { width: 16px; height: 16px; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(var(--bg-primary-rgb), 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 2px; } .logo span { color: var(--accent); } .main-nav { display: flex; align-items: center; gap: 36px; } .main-nav a { font-size: 14.5px; color: var(--text-muted); font-weight: 500; transition: color 0.15s ease; position: relative; } .main-nav a:hover { color: var(--text-primary); } .main-nav a.active { color: var(--text-primary); } .main-nav a.active::after { content: ''; position: absolute; bottom: -28px; left: 0; right: 0; height: 2px; background: var(--accent); } .header-actions { display: flex; align-items: center; gap: 16px; } /* Language switcher dropdown */ .lang-switcher { position: relative; } .lang-current { display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 19px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .lang-current:hover { border-color: var(--accent); color: var(--accent); } .lang-current svg { transition: transform 0.15s ease; } .lang-switcher.is-open .lang-current svg { transform: rotate(180deg); } .lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5); z-index: 50; } .lang-switcher.is-open .lang-menu { display: block; } .lang-option { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 5px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 13.5px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .lang-option:hover { background: var(--bg-elevated); color: var(--text-primary); } .lang-option.is-active { color: var(--accent); font-weight: 600; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); flex-shrink: 0; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--text-primary); transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobil menyu açıq olanda arxa fonu tutur — həm fokusu aydınlaşdırır, həm də toxunanda menyunun bağlanmasına imkan verir. */ .nav-backdrop { display: none; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); z-index: 98; } .nav-backdrop.is-open { display: block; } body.nav-locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } } /* ========================================================================== Hero ========================================================================== */ .hero { padding: 88px 0 64px; border-bottom: 1px solid var(--border-soft); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; } .hero-grid.reverse { grid-template-columns: 0.85fr 1.15fr; } .hero h1 { font-size: 52px; margin-bottom: 22px; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p.lead { font-size: 18px; color: var(--text-muted); max-width: 480px; margin-bottom: 32px; } .hero-cta { display: flex; gap: 14px; margin-bottom: 40px; } .hero-trust { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; } /* ---- Signature element: live status monitor ---- */ /* Rotating green LED-style light ring around the status panel */ .status-panel-wrap { position: relative; padding: 2px; border-radius: 9px; overflow: hidden; } .status-panel-wrap .led-spin { position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg, #1a5c3f 310deg, #3DDC97 330deg, #a8ffd9 345deg, #3DDC97 355deg, transparent 360deg); animation: led-rotate 3.2s linear infinite; } @keyframes led-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .status-panel-wrap .led-spin { animation: none; display: none; } } .status-panel { position: relative; z-index: 1; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } /* Ambient "radar sweep" light passing through the panel — purely decorative, gives the sense of an active live feed */ .status-scan { position: absolute; left: 0; right: 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(255, 176, 32, 0.07), transparent); pointer-events: none; animation: status-scan-move 5s ease-in-out infinite; } @keyframes status-scan-move { 0% { top: -25%; } 100% { top: 115%; } } .status-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; } .status-panel-head .dot-row { display: flex; gap: 6px; } .status-panel-head .dot-row span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } #clock-readout { color: var(--text-muted); } .status-list { padding: 6px 0; } .status-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; } .status-row:last-child { border-bottom: none; } .status-row .label { display: flex; align-items: center; gap: 10px; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); animation: pulse 2.2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } } .status-row .value { font-family: var(--font-mono); color: var(--ok); font-size: 12px; } /* Live activity ticker — a single rotating log-style line, like a real monitoring feed */ .status-ticker { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--border); background: rgba(var(--bg-primary-rgb), 0.4); } .status-ticker .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse-amber 2s infinite; } @keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(255, 176, 32, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); } } .status-ticker span.msg { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; } .status-ticker span.msg.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .status-scan { animation: none; display: none; } .status-ticker .live-dot { animation: none; } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } /* ---- Hero slider: text + media rotate together, like a full carousel ---- */ .hero-slider-outer { position: relative; } .hero-slider { position: relative; } .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; position: relative; } .hero-media .status-panel, .hero-media .video-feature { height: 100%; min-height: 280px; } .hero-media .cloud-diagram { width: 100%; height: auto; min-height: 280px; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: rgba(var(--bg-primary-rgb), 0.75); backdrop-filter: blur(4px); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .slider-arrow:hover { transform: translateY(-50%) scale(1.06); border-color: var(--accent); color: var(--accent); } .slider-arrow svg { width: 18px; height: 18px; } /* Anchored to the slider's own outer edges. Offset must clear the arrow's own 44px width, or half of it lands back on top of the content (the actual bug). */ .slider-arrow.prev { left: -60px; } .slider-arrow.next { right: -60px; } @media (max-width: 1400px) { .slider-arrow.prev { left: -40px; } .slider-arrow.next { right: -40px; } } .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border); cursor: pointer; padding: 0; transition: background 0.2s ease, width 0.2s ease; } .dot.is-active { background: var(--accent); width: 22px; border-radius: 4px; } @media (max-width: 900px) { .slider-arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } /* ========================================================================== Trusted-by logo marquee ========================================================================== */ .logos-strip { padding: 36px 0; border-bottom: 1px solid var(--border-soft); } .logos-strip .eyebrow { justify-content: center; margin-bottom: 24px; } .logos-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .logos-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: scroll-logos 32s linear infinite; } .logos-track:hover { animation-play-state: paused; } .logo-item { flex-shrink: 0; height: 30px; display: flex; align-items: center; } .logo-item img { height: 100%; max-width: 140px; object-fit: contain; filter: grayscale(1) opacity(0.55); transition: filter 0.2s ease; } .logo-item img:hover { filter: grayscale(0) opacity(1); } .logo-item .text-logo { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-faint); white-space: nowrap; transition: color 0.2s ease; } .logo-item .text-logo:hover { color: var(--text-muted); } @keyframes scroll-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logos-track { animation: none; overflow-x: auto; } } /* ========================================================================== Stat strip ========================================================================== */ .stat-strip { border-bottom: 1px solid var(--border-soft); background: var(--bg-secondary); } .stat-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); } .stat-strip .container.stat-strip-3col { grid-template-columns: repeat(3, 1fr); } .stat { padding: 36px 24px; border-right: 1px solid var(--border-soft); } .stat:last-child { border-right: none; } .stat .num { font-family: var(--font-mono); font-size: 30px; color: var(--accent); font-weight: 500; } .stat .label { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* ========================================================================== Section shell ========================================================================== */ .section { padding: 96px 0; border-bottom: 1px solid var(--border-soft); } .section-head { max-width: 620px; margin-bottom: 56px; } .section-head h2 { font-size: 34px; margin-bottom: 14px; } .section-head p { color: var(--text-muted); font-size: 16px; } /* ========================================================================== Service cards ========================================================================== */ .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); } .service-card { background: var(--bg-primary); padding: 36px 32px; transition: background 0.2s ease; } .service-card:hover { background: var(--bg-elevated); } .service-card .idx { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 20px; display: block; } .service-card h3 { font-size: 19px; margin-bottom: 12px; } .service-card p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 18px; } .service-card .more { font-size: 13.5px; color: var(--accent); font-weight: 600; } /* ========================================================================== Contact ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; } .contact-info-item { padding: 20px 0; border-bottom: 1px solid var(--border-soft); } .contact-info-item .k { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 6px; } .contact-info-item .v { font-size: 17px; } .contact-info-item .v a:hover { color: var(--accent); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; color: var(--text-primary); font-family: var(--font-body); font-size: 14.5px; transition: border-color 0.15s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-msg { padding: 14px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 24px; } .form-msg.success { background: rgba(61, 220, 151, 0.1); border: 1px solid rgba(61, 220, 151, 0.3); color: var(--ok); } .form-msg.error { background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 90, 90, 0.3); color: #ff8a8a; } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding: 56px 0 32px; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 40px; border-bottom: 1px solid var(--border-soft); margin-bottom: 28px; } .footer-top p { color: var(--text-muted); font-size: 14px; max-width: 320px; margin-top: 12px; } .footer-cols { display: flex; gap: 64px; } .footer-col h4 { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 16px; } .footer-col a { display: block; color: var(--text-muted); font-size: 14px; margin-bottom: 10px; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-faint); } /* ========================================================================== Page header (inner pages) ========================================================================== */ .page-header { padding: 64px 0 48px; border-bottom: 1px solid var(--border-soft); } .page-header h1 { font-size: 40px; margin-bottom: 12px; } .page-header p { color: var(--text-muted); font-size: 16px; max-width: 560px; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity 0.75s cubic-bezier(0.2, 0.65, 0.3, 1), transform 0.75s cubic-bezier(0.2, 0.65, 0.3, 1); } .reveal { transform: translateY(22px); } .reveal-left { transform: translateX(-44px); } .reveal-right { transform: translateX(44px); } .reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; } /* stagger delays applied via data-delay -> inline style, but provide fallback classes */ .reveal.d1, .reveal-left.d1, .reveal-right.d1 { transition-delay: 0.08s; } .reveal.d2, .reveal-left.d2, .reveal-right.d2 { transition-delay: 0.16s; } .reveal.d3, .reveal-left.d3, .reveal-right.d3 { transition-delay: 0.24s; } .reveal.d4, .reveal-left.d4, .reveal-right.d4 { transition-delay: 0.32s; } .reveal.d5, .reveal-left.d5, .reveal-right.d5 { transition-delay: 0.4s; } .reveal.d6, .reveal-left.d6, .reveal-right.d6 { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; } } .video-feature { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-elevated); } /* Ambient placeholder graphic behind the video, shows through until video loads / if it's missing */ .poster-graphic { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, var(--accent-glow) 0%, transparent 45%), repeating-linear-gradient(90deg, var(--border-soft) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, var(--border-soft) 0 1px, transparent 1px 64px), linear-gradient(160deg, var(--bg-elevated), var(--bg-secondary)); } .video-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; } .video-caption { position: absolute; left: 20px; bottom: 18px; font-family: var(--font-mono); font-size: 12px; color: #EDEFF3; background: rgba(10, 14, 23, 0.55); padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.08); z-index: 2; } /* If the video file is missing, hide it so the poster graphic shows through, and flag it */ .video-feature.video-missing video { display: none; } .video-feature.video-missing::after { content: 'Video tapılmadı — videos/ qovluğuna .mp4 fayl əlavə edin'; position: absolute; bottom: 18px; left: 20px; right: 20px; z-index: 2; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .video-feature.video-missing .video-caption { display: none; } /* ========================================================================== Card motion ========================================================================== */ .service-card { transform: translateY(0); transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease; } .service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.6); } /* ========================================================================== Cloud section ========================================================================== */ .cloud-section { background: var(--bg-secondary); } .cloud-grid { display: flex; flex-direction: row-reverse; gap: 56px; align-items: center; } .cloud-grid > * { flex: 1 1 0; min-width: 0; } .cloud-points { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .cloud-point { display: flex; gap: 14px; align-items: flex-start; } .cloud-point .mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-top: 2px; } .cloud-point .txt strong { display: block; font-size: 15px; margin-bottom: 2px; } .cloud-point .txt span { font-size: 13.5px; color: var(--text-muted); } .cloud-diagram { width: 100%; height: auto; } .cloud-node-circle { fill: var(--bg-primary); stroke: var(--border); stroke-width: 1.5; } .cloud-node-circle.center { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 1.5; } .cloud-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); text-anchor: middle; } .cloud-node-label.center { fill: var(--accent); font-size: 13px; font-weight: 600; } .cloud-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.55; animation: dashflow 1.4s linear infinite; } @keyframes dashflow { to { stroke-dashoffset: -22; } } .cloud-node-dot { fill: var(--ok); animation: pulse 2.2s infinite; } @media (prefers-reduced-motion: reduce) { .cloud-line { animation: none; } .cloud-node-dot { animation: none; } } /* ========================================================================== App-build diagram (hero slide: "Tətbiq Hazırlanması") ========================================================================== */ .app-diagram { width: 100%; height: auto; } .app-conn { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.5; animation: dashflow 1.4s linear infinite; } .app-chip { fill: var(--bg-primary); stroke: var(--border); stroke-width: 1.5; } .app-chip-text { font-family: var(--font-mono); font-size: 14px; fill: var(--accent); text-anchor: middle; } .app-chip-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-faint); text-anchor: middle; } .app-phoneA, .app-phoneB { transform-origin: 500px 150px; transform-box: fill-box; } .app-phoneA { animation: app-phonecycle 3.2s ease-in-out infinite; } .app-phoneB { animation: app-phonecycle 3.2s ease-in-out infinite; animation-delay: 1.6s; } @keyframes app-phonecycle { 0% { opacity: 0; transform: scale(0.5); } 8% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.18); } 50% { opacity: 0; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } } .app-phone-frame { fill: var(--bg-primary); stroke: var(--text-faint); stroke-width: 2; } .app-screen { fill: var(--bg-secondary); } .app-notif { fill: var(--ok); animation: pulse 2s infinite; } .app-block { fill: var(--accent-dim); } .app-header-block { animation: app-growheader 3.2s ease-in-out infinite; } @keyframes app-growheader { 0% { width: 0; } 25% { width: 100px; } 90% { width: 100px; } 100% { width: 0; } } .app-b1, .app-b2, .app-b3 { opacity: 0; transform-origin: left center; transform-box: fill-box; transform: scaleX(0); } .app-b1 { animation: app-growblock 3.2s ease-in-out infinite 0.4s; } .app-b2 { animation: app-growblock 3.2s ease-in-out infinite 0.65s; } .app-b3 { animation: app-growblock 3.2s ease-in-out infinite 0.9s; } @keyframes app-growblock { 0% { opacity: 0; transform: scaleX(0); } 15% { opacity: 1; transform: scaleX(1); } 80% { opacity: 1; transform: scaleX(1); } 95%, 100% { opacity: 0; transform: scaleX(0); } } .app-progress-track { fill: var(--border-soft); } .app-progress-fill { fill: var(--accent); animation: app-fillbar 3.2s ease-in-out infinite; } @keyframes app-fillbar { 0% { width: 0; } 90% { width: 100px; } 100% { width: 100px; } } .app-caption { font-family: var(--font-mono); font-size: 12px; fill: var(--text-faint); text-anchor: middle; } @media (prefers-reduced-motion: reduce) { .app-conn, .app-phoneA, .app-phoneB, .app-notif, .app-header-block, .app-b1, .app-b2, .app-b3, .app-progress-fill { animation: none; } } /* ========================================================================== Field Service diagram (hero slide: "Sahə Xidməti") ========================================================================== */ .field-diagram { width: 100%; height: auto; } .field-route { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 6 7; } .field-route-progress { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 7; animation: dashflow 1s linear infinite; } .field-origin-circle { fill: var(--bg-primary); stroke: var(--border); stroke-width: 1.5; } .field-origin-dot { fill: var(--ok); animation: pulse 2.2s infinite; } .field-origin-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); text-anchor: middle; } .field-pin { fill: var(--bg-primary); stroke: var(--accent); stroke-width: 1.5; } .field-pin-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); text-anchor: middle; } .field-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-origin: 460px 90px; transform-box: fill-box; animation: field-arrive-ring 4s ease-out infinite; } @keyframes field-arrive-ring { 0%, 78% { opacity: 0; transform: scale(0.6); } 85% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } .field-check { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 20; stroke-dashoffset: 20; animation: field-check-draw 4s ease-in-out infinite; } @keyframes field-check-draw { 0%, 80% { opacity: 0; stroke-dashoffset: 20; } 88% { opacity: 1; stroke-dashoffset: 0; } 98% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } .field-van { offset-path: path('M90,270 C200,320 370,300 460,95'); animation: field-van-travel 4s linear infinite; } .field-van-body { fill: var(--accent); } .field-van-window { fill: var(--bg-primary); opacity: 0.35; } @keyframes field-van-travel { 0% { offset-distance: 0%; opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 82% { opacity: 0; } 100% { offset-distance: 0%; opacity: 0; } } .field-caption { font-family: var(--font-mono); font-size: 12px; fill: var(--text-faint); text-anchor: middle; } @media (prefers-reduced-motion: reduce) { .field-route-progress, .field-ring, .field-check, .field-van, .field-origin-dot { animation: none; } } /* ========================================================================== IT Support diagram (hero slide: "IT Dəstək") — bilet daxil olur, dəstək komandası (qulaqlıq) qəbul edir, yaşıl "check" ilə həll olunur ========================================================================== */ .support-diagram { width: 100%; height: auto; } .support-route { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 6 7; } .support-route-progress { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 7; animation: dashflow 1s linear infinite; } .support-ticket-circle { fill: var(--bg-primary); stroke: var(--border); stroke-width: 1.5; } .support-ticket-icon { font-family: var(--font-display); font-size: 22px; font-weight: 700; fill: var(--text-muted); text-anchor: middle; } .support-agent-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; animation: support-agent-pulse 2.6s ease-out infinite; } @keyframes support-agent-pulse { 0% { opacity: 0.6; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.25); } } .support-agent-circle { fill: var(--bg-primary); stroke: var(--accent); stroke-width: 2; } .support-headset-band, .support-headset-mic { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .support-headset-ear { fill: var(--accent); } .support-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-muted); text-anchor: middle; } .support-resolved-circle { fill: var(--bg-primary); stroke: var(--border); stroke-width: 1.5; } .support-resolved-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; animation: support-arrive-ring 4s ease-out infinite; } @keyframes support-arrive-ring { 0%, 78% { opacity: 0; transform: scale(0.6); } 85% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } .support-check { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 20; stroke-dashoffset: 20; animation: support-check-draw 4s ease-in-out infinite; } @keyframes support-check-draw { 0%, 80% { opacity: 0; stroke-dashoffset: 20; } 88% { opacity: 1; stroke-dashoffset: 0; } 98% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } .support-token { fill: var(--accent); offset-path: path('M90,230 Q280,110 470,230'); animation: support-token-travel 4s linear infinite; } @keyframes support-token-travel { 0% { offset-distance: 0%; opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 82% { opacity: 0; } 100% { offset-distance: 0%; opacity: 0; } } .support-caption { font-family: var(--font-mono); font-size: 12px; fill: var(--text-faint); text-anchor: middle; } @media (prefers-reduced-motion: reduce) { .support-route-progress, .support-agent-ring, .support-resolved-ring, .support-check, .support-token { animation: none; } } /* ========================================================================== Responsive ========================================================================== */ /* 3CX Live Chat & Talk widget vaxtilə burada idi — çıxarılıb (bax: includes/footer.php). */ /* ========================================================================== Service detail page ========================================================================== */ .xidmet-points-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .xidmet-point-item { display: flex; align-items: center; gap: 16px; padding: 22px 20px; border-radius: 8px; transition: background 0.2s ease; } .xidmet-point-item:hover { background: var(--bg-elevated); } .xidmet-point-item .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; } .xidmet-point-item strong { font-size: 15.5px; font-weight: 600; line-height: 1.35; } .xidmet-other-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 24px; transition: transform 0.2s ease, border-color 0.2s ease; display: block; } .xidmet-other-card:hover { transform: translateY(-3px); border-color: var(--accent); } .xidmet-other-card h4 { font-size: 16px; margin-bottom: 8px; } .xidmet-other-card p { font-size: 13.5px; color: var(--text-muted); } .xidmet-other-card .more { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 12px; display: block; } /* ========================================================================== Footer social icons ========================================================================== */ .footer-socials { display: flex; gap: 10px; margin-top: 16px; } .footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: border-color 0.15s ease, color 0.15s ease; flex-shrink: 0; } .footer-socials a:hover { border-color: var(--accent); color: var(--accent); } .footer-socials svg { width: 16px; height: 16px; } /* ========================================================================== Page loader — shown on initial load and before internal navigation ========================================================================== */ .page-loader { position: fixed; inset: 0; background: var(--bg-primary); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.35s ease, visibility 0.35s ease; } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader-spinner { position: relative; width: 64px; height: 64px; } .loader-arc { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; } .loader-arc-1 { border-top-color: var(--accent); border-right-color: var(--accent); animation: loader-spin 1s linear infinite; } .loader-arc-2 { inset: 11px; border-top-color: var(--text-muted); animation: loader-spin 1.3s linear infinite reverse; } @keyframes loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loader-arc { animation: none; } } /* ========================================================================== Callback request floating button + modal (public site) ========================================================================== */ .callback-float { position: fixed; bottom: 24px; left: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); z-index: 90; cursor: pointer; transition: transform 0.15s ease; } .callback-float:hover { transform: scale(1.08); } .callback-float svg { width: 24px; height: 24px; } /* Tawk.to söndürülübsə (Ayarlar → Tawk.to), bu düymə tək qalır və sağdakı boş yerə keçir. */ .callback-float--solo { left: auto; right: 24px; } /* ========================================================================== WIS-in öz canlı söhbət widget-i (js/chat-widget.js + chat-api.php) ========================================================================== */ .wis-chat-launcher { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); z-index: 95; cursor: pointer; transition: transform 0.15s ease; } .wis-chat-launcher:hover { transform: scale(1.08); } .wis-chat-launcher svg { width: 24px; height: 24px; } .wis-chat-badge { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg-primary); } .wis-chat-panel { position: fixed; bottom: 92px; right: 24px; width: 368px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-glow, transparent); display: flex; flex-direction: column; overflow: hidden; z-index: 94; opacity: 0; transform: translateY(24px) scale(0.94); pointer-events: none; transition: opacity 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } .wis-chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .wis-chat-panel { transition: opacity 0.15s ease; transform: none !important; } } .wis-chat-panel-head { padding: 16px 16px 16px 14px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; gap: 11px; } .wis-chat-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(20, 16, 10, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wis-chat-avatar svg { width: 19px; height: 19px; } .wis-chat-avatar-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--accent); animation: wis-chat-dot-pulse 2s ease-in-out infinite; } @keyframes wis-chat-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .wis-chat-panel-head-text { flex: 1 1 auto; min-width: 0; } .wis-chat-panel-head strong { font-size: 14.5px; } .wis-chat-panel-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; } .wis-chat-close-btn { background: rgba(20, 16, 10, 0.15); border: none; color: var(--on-accent); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .wis-chat-close-btn:hover { background: rgba(20, 16, 10, 0.28); } .wis-chat-close-btn svg { width: 16px; height: 16px; } .wis-chat-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 93; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .wis-chat-backdrop.is-open { display: block; opacity: 1; pointer-events: auto; } .wis-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .wis-chat-greeting { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; border-bottom-left-radius: 4px; padding: 10px 14px; font-size: 13px; color: var(--text-muted); max-width: 85%; } .wis-chat-typing { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 12px; border-bottom-left-radius: 4px; padding: 12px 16px; display: flex; gap: 4px; } .wis-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: wis-chat-typing-bounce 1.2s ease-in-out infinite; } .wis-chat-typing span:nth-child(2) { animation-delay: 0.15s; } .wis-chat-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes wis-chat-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wis-chat-typing span { animation: none; } } .wis-chat-msg { display: flex; flex-direction: column; max-width: 82%; } .wis-chat-msg--visitor { align-self: flex-end; align-items: flex-end; } .wis-chat-msg--support { align-self: flex-start; align-items: flex-start; } .wis-chat-msg-label { font-size: 10.5px; color: var(--text-faint); margin-bottom: 3px; font-family: var(--font-mono); } .wis-chat-bubble { padding: 9px 13px; border-radius: 13px; font-size: 13.5px; line-height: 1.45; } .wis-chat-msg--visitor .wis-chat-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; } .wis-chat-msg--support .wis-chat-bubble { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; } .wis-chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-soft); } .wis-chat-input-row input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 20px; padding: 9px 16px; font-size: 13.5px; color: var(--text-primary); min-width: 0; } .wis-chat-input-row input:focus { outline: none; border-color: var(--accent); } .wis-chat-input-row .btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center; flex-shrink: 0; } .wis-chat-send-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .wis-chat-send-btn:hover { background: #ffc250; } @media (max-width: 480px) { .wis-chat-launcher.is-hidden-mobile { display: none; } .wis-chat-launcher { bottom: 16px; right: 16px; width: 50px; height: 50px; } .wis-chat-launcher svg { width: 21px; height: 21px; } /* Kiçik üzən kart — sadəcə mobil ekranda bir az böyüdülüb, ekranın ortasına yaxın, aşağıdan bir az yuxarıda dayanır (klaviatura ilə üst-üstə düşməsin deyə). */ .wis-chat-panel { bottom: 80px; right: 12px; left: 12px; width: auto; max-width: none; height: min(72vh, 600px); max-height: 72vh; } } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.is-open { display: flex; } .modal-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 26px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; position: sticky; top: 0; background: var(--bg-secondary); z-index: 2; } .modal-head h2 { font-size: 18px; flex: 1 1 auto; min-width: 0; } .modal-head .btn-icon { flex-shrink: 0; background: var(--bg-elevated); } /* ========================================================================== MOBİL / RESPONSİV — sıfırdan, 3 səviyyəli sistem: 1024px (planşet), 768px (kiçik planşet/üfüqi telefon), 480px (telefon) ========================================================================== */ /* ---- 1024px: geniş planşet ---- */ @media (max-width: 1024px) { .hero-grid, .hero-grid.reverse { grid-template-columns: 1fr; gap: 40px; } .cloud-grid { flex-direction: column; gap: 40px; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .service-grid { grid-template-columns: 1fr 1fr; } .stat-strip .container, .stat-strip .container.stat-strip-3col { grid-template-columns: 1fr 1fr; } .stat:nth-child(2n) { border-right: none; } .footer-top { flex-direction: column; gap: 28px; } } /* ---- 768px: header menyusu sığmır, hamburger-ə keçir ---- */ @media (max-width: 768px) { .container { padding: 0 24px; } .main-nav { display: none; } .main-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--bg-primary); border-bottom: 1px solid var(--border-soft); padding: 20px 24px; gap: 16px; z-index: 99; } /* Masaüstü altı-xətt effekti (bottom:-28px) üfüqi menyu üçündür — dropdown-da sonrakı sətrə düşür, ona görə burda sol kənar zolağı istifadə olunur. */ .main-nav.is-open a.active::after { display: none; } .main-nav.is-open a.active { border-left: 2px solid var(--accent); padding-left: 10px; } .nav-toggle { display: flex; } .header-actions { gap: 8px; } .header-actions .btn-primary { display: none; } /* menyuda "Əlaqə" linki onsuz da var */ .lang-current { padding: 0 9px; font-size: 11px; } .logo { font-size: 20px; } .hero { padding: 56px 0 40px; } .hero h1 { font-size: 32px; } .hero p.lead { font-size: 16px; } .hero-cta { flex-wrap: wrap; } .section { padding: 64px 0; } .section-head h2 { font-size: 26px; } .page-header { padding: 44px 0 32px; } .page-header h1 { font-size: 30px; } .service-grid { grid-template-columns: 1fr; } .stat-strip .container, .stat-strip .container.stat-strip-3col { grid-template-columns: 1fr; } .stat { border-right: none !important; border-bottom: 1px solid var(--border-soft); } .form-row { grid-template-columns: 1fr; } .footer-cols { flex-direction: column; gap: 24px; } .xidmet-points-box { grid-template-columns: 1fr; } .xidmet-other-card p, .contact-info-item .v, .footer-col a { overflow-wrap: anywhere; word-break: break-word; } /* SVG diaqramları (bulud/tətbiq/sahə xidməti/status paneli) masaüstündəki sabit min-height-i tərk edib öz təbii nisbətinə uyğun hündürlükdə göstərilsin */ .hero-media .cloud-diagram, .hero-media .app-diagram, .hero-media .field-diagram, .hero-media .support-diagram { min-height: 0; } .hero-media .status-panel, .hero-media .video-feature { min-height: 220px; } .modal-overlay { align-items: flex-start; padding-top: 32px; } .modal-box { width: calc(100% - 32px); max-width: none; margin: 16px; padding: 22px; max-height: calc(100vh - 64px); } } /* ---- 480px: telefon ---- */ @media (max-width: 480px) { .container { padding: 0 18px; } .logo { font-size: 18px; } .eyebrow { font-size: 11px; } .btn:not(.btn-icon) { padding: 12px 20px; font-size: 13.5px; } .hero h1 { font-size: 26px; } .hero p.lead { font-size: 15px; } .hero-trust { font-size: 11px; } .page-header h1 { font-size: 26px; } .section-head h2 { font-size: 22px; } .service-card { padding: 28px 22px; } .stat { padding: 24px 18px; } .stat .num { font-size: 24px; } .footer-socials { flex-wrap: wrap; } .callback-float { bottom: 16px; left: 16px; width: 50px; height: 50px; } .callback-float--solo { left: auto; right: 16px; } .callback-float svg { width: 21px; height: 21px; } }