/* ⏰ 2026 — HUD/UI Interface Library | site.css — стилі сайту */ /* === LIGHT THEME SITE VARS === */ :root { /* Glass surface colors */ --glass-base: #e8f2fa; --glass-refract-1: rgba(255,255,255,0.92); --glass-refract-2: rgba(200,230,250,0.55); --glass-specular: rgba(255,255,255,0.98); --glass-edge: rgba(180,220,245,0.6); --glass-caustic: rgba(140,200,240,0.12); --glass-shadow: rgba(100,140,180,0.18); /* UI vars */ --header-bg: rgba(255,255,255,0.78); --header-border: rgba(2,217,255,0.22); --header-shadow: 0 2px 24px rgba(80,140,200,0.1), 0 1px 0 rgba(255,255,255,0.9) inset; --nav-link: rgba(40,80,110,0.75); --nav-link-hover: rgba(2,217,255,1); --nav-active-bg: rgba(2,217,255,0.09); --code-bg: rgba(235,245,255,0.82); --code-border: rgba(2,217,255,0.18); --copy-success: var(--c-green); --page-title-color: var(--c-biruz); --hud-grid-color: rgba(80,150,220,0.045); --footer-bg: rgba(255,255,255,0.45); --footer-border: rgba(2,217,255,0.13); --logo-glow: 0 0 12px rgba(2,217,255,0.35); } /* === DARK THEME === */ [data-theme="dark"] { --header-bg: rgba(10,20,38,0.88); --header-border: rgba(2,217,255,0.2); --header-shadow: 0 2px 30px rgba(0,0,0,0.5); --nav-link: rgba(148,162,176,0.8); --nav-link-hover: rgba(2,217,255,1); --nav-active-bg: rgba(2,217,255,0.08); --code-bg: rgba(4,12,28,0.9); --code-border: rgba(2,217,255,0.18); --page-title-color: var(--c-blue); --hud-grid-color: rgba(2,217,255,0.025); --footer-bg: rgba(6,15,32,0.7); --footer-border: rgba(2,217,255,0.12); --logo-glow: 0 0 18px rgba(2,217,255,0.5); } /* === GLASS SURFACE BACKGROUND === */ html {scroll-behavior: smooth;} /* Layer 1 — Ambient glass base (fixed, full viewport) */ html::before {content: ''; position: fixed; inset: 0; z-index: -3; background: /* Specular diagonal highlight — top-left bright slash */ linear-gradient(118deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.88) 18%, rgba(255,255,255,0.0) 28%), /* Secondary specular — right edge */ linear-gradient(295deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0.0) 55%), /* Blue-cyan refraction zone — bottom-left */ radial-gradient(ellipse 80% 60% at 10% 90%, rgba(140,210,245,0.28) 0%, transparent 70%), /* Warm refraction zone — top-right */ radial-gradient(ellipse 70% 50% at 90% 5%, rgba(200,230,255,0.22) 0%, transparent 60%), /* Caustic light ripple — centre */ radial-gradient(ellipse 55% 40% at 50% 50%, rgba(220,240,255,0.14) 0%, transparent 70%), /* Glass body base gradient */ linear-gradient(160deg, #eaf4fc 0%, #d8ecf7 35%, #c8e0f0 65%, #d4eaf8 100%); pointer-events: none;} /* Layer 2 — Fine glass texture grid + micro-caustics (scrolls with page) */ html::after {content: ''; position: fixed; inset: 0; z-index: -2; background-image: /* Micro caustic ripple — subtle radial bloom */ radial-gradient(ellipse 3px 12px at 25% 35%, rgba(2,217,255,0.07) 0%, transparent 100%), radial-gradient(ellipse 12px 3px at 70% 60%, rgba(2,217,255,0.05) 0%, transparent 100%), radial-gradient(ellipse 2px 8px at 55% 15%, rgba(255,255,255,0.4) 0%, transparent 100%), /* Fine engineering grid */ linear-gradient(rgba(80,150,220,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(80,150,220,0.04) 1px, transparent 1px), /* Dotted sub-grid (every 8px) */ radial-gradient(circle, rgba(100,160,220,0.08) 1px, transparent 1px); background-size: auto, auto, auto, 32px 32px, 32px 32px, 8px 8px; pointer-events: none;} /* Surface shimmer animation */ @keyframes glass-shimmer {0%, 100% {opacity: 1;} 48% {opacity: 0.88;} 50% {opacity: 0.94;} 52% {opacity: 0.88;}} html::before {animation: glass-shimmer 8s ease-in-out infinite;} body {background: transparent; transition: color 0.3s ease; padding-top: 70px;} /* === DARK OVERRIDE — Deep glass / obsidian === */ /* data-theme is set on , so :root targets it directly */ :root[data-theme="dark"]::before {background: /* Dark specular — faint diagonal on dark glass */ linear-gradient(118deg, rgba(255,255,255,0.0) 0%, rgba(2,217,255,0.04) 20%, rgba(255,255,255,0.0) 32%), /* Deep obsidian base */ linear-gradient(160deg, #060d1a 0%, var(--bg-color) 40%, #050c18 70%, var(--bg-color) 90%); animation: none;} :root[data-theme="dark"]::after {background-image: linear-gradient(rgba(2,217,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(2,217,255,0.025) 1px, transparent 1px), radial-gradient(circle, rgba(2,217,255,0.03) 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px;} [data-theme="dark"] body {background: transparent;} /* === HEADER === */ .site-header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px; background: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--header-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s, border-color 0.3s;} .site-header::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--c-blue-40), var(--c-biruz-40), transparent); pointer-events: none;} .header-inner {max-width: 1980px; margin: 0 auto; padding: 0 var(--gap); height: 60px; display: flex; align-items: center; gap: var(--gap); justify-content: space-between;} /* === LOGO === */ .site-logo {display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0;} .logo-mark {position: relative; width: 36px; height: 36px; border: 1.5px solid var(--c-blue-60); border-radius: 6px 0; corner-shape: bevel; display: flex; align-items: center; justify-content: center; background: rgba(2,217,255,0.06); box-shadow: var(--logo-glow); transition: box-shadow 0.3s;} .logo-mark::before {content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-top: 1.5px solid var(--c-blue-60); border-right: 1.5px solid var(--c-blue-60);} .logo-mark::after {content: ''; position: absolute; bottom: 3px; left: 3px; width: 6px; height: 6px; border-bottom: 1.5px solid var(--c-blue-60); border-left: 1.5px solid var(--c-blue-60);} .logo-mark svg.icon {width: 18px; height: 18px; color: var(--c-blue); stroke: var(--c-blue); fill: none;} .site-logo:hover .logo-mark {box-shadow: 0 0 20px rgba(2,217,255,0.6);} .logo-text {display: flex; flex-direction: column; line-height: 1;} .logo-title {font-family: 'Handjet', sans-serif; font-size: 18px; color: var(--c-blue); text-shadow: 0 0 8px rgba(2,217,255,0.5); letter-spacing: 3px; text-transform: uppercase;} .logo-sub {font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-gray-60); letter-spacing: 2px; text-transform: uppercase;} /* === NAVIGATION — DROPDOWN === */ .site-nav {display: flex; align-items: center; gap: var(--gapm2); position: relative; flex: 1;} /* --- Trigger button --- */ .nav-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: transparent; border: 1px solid var(--c-blue-20); border-radius: 4px 0; corner-shape: bevel; cursor: pointer; font-family: 'Tektur', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--nav-link); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; white-space: nowrap; } .nav-trigger:hover, .nav-trigger.is-open { color: var(--nav-link-hover); border-color: var(--c-blue-40); background: var(--nav-active-bg); box-shadow: 0 0 12px rgba(2,217,255,0.1); text-shadow: 0 0 8px rgba(2,217,255,0.4); } /* 3×3 dot grid icon */ .nav-trigger-grid { display: grid; grid-template-columns: repeat(3, 3px); gap: 2.5px; flex-shrink: 0; } .nav-trigger-grid span { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; } .nav-trigger:hover .nav-trigger-grid span, .nav-trigger.is-open .nav-trigger-grid span { opacity: 1; } .nav-trigger.is-open .nav-trigger-grid span:nth-child(1) { transform: translateX(2.5px) translateY(2.5px); } .nav-trigger.is-open .nav-trigger-grid span:nth-child(3) { transform: translateX(-2.5px) translateY(2.5px); } .nav-trigger.is-open .nav-trigger-grid span:nth-child(7) { transform: translateX(2.5px) translateY(-2.5px); } .nav-trigger.is-open .nav-trigger-grid span:nth-child(9) { transform: translateX(-2.5px) translateY(-2.5px); } /* Chevron arrow */ .nav-trigger-arrow { width: 14px; height: 14px; stroke: currentColor; fill: none; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; } .nav-trigger.is-open .nav-trigger-arrow { transform: rotate(180deg); } /* Active page breadcrumb label */ .nav-active-label { display: inline-flex; align-items: center; gap: 4px; font-family: 'Tektur', monospace; font-size: 10px; color: var(--c-blue); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } .nav-active-label .icon { width: 11px; height: 11px; stroke: currentColor; fill: none; color: var(--c-blue-60); } /* --- Dropdown panel --- */ .nav-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 800px; z-index: 2000; /* hidden state */ opacity: 0; transform: translateY(-10px) scaleY(0.96); pointer-events: none; transform-origin: top left; transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1); } .nav-dropdown.is-open { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; } .nav-dropdown-inner { background: var(--header-bg); border: 1px solid var(--header-border); border-radius: 0 8px 8px 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(2,217,255,0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; } /* Dropdown header bar */ .nav-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; border-bottom: 1px solid var(--header-border); } .nav-dd-label { font-family: 'Tektur', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 3px; color: var(--c-blue-60); } .nav-dd-count { font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-gray-40); letter-spacing: 1px; } /* Grid of nav items */ .nav-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--header-border); padding: 0; } /* Individual item */ .nav-dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; background: var(--header-bg); transition: background 0.18s, color 0.18s; position: relative; overflow: hidden; } .nav-dd-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c-blue); transform: scaleY(0); transform-origin: center; transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); } .nav-dd-item:hover::before, .nav-dd-item.active::before { transform: scaleY(1); } .nav-dd-item:hover { background: var(--nav-active-bg); } .nav-dd-item.active { background: rgba(2,217,255,0.06); } /* Icon wrapper */ .nav-dd-icon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--c-blue-20); border-radius: 4px 0; corner-shape: bevel; display: flex; align-items: center; justify-content: center; background: rgba(2,217,255,0.04); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .nav-dd-item:hover .nav-dd-icon, .nav-dd-item.active .nav-dd-icon { border-color: var(--c-blue-40); background: rgba(2,217,255,0.1); box-shadow: 0 0 8px rgba(2,217,255,0.15); } .nav-dd-icon .icon { width: 15px; height: 15px; stroke: var(--c-blue-60); fill: none; transition: stroke 0.2s; } .nav-dd-item:hover .nav-dd-icon .icon, .nav-dd-item.active .nav-dd-icon .icon { stroke: var(--c-blue); } /* Text block */ .nav-dd-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .nav-dd-title { font-family: 'Tektur', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--nav-link); transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-dd-desc { font-size: 9px; color: var(--c-gray-40); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-dd-item:hover .nav-dd-title, .nav-dd-item.active .nav-dd-title { color: var(--nav-link-hover); text-shadow: 0 0 8px rgba(2,217,255,0.4); } /* Arrow glyph */ .nav-dd-arrow { font-size: 14px; color: var(--c-blue-20); flex-shrink: 0; transition: color 0.2s, transform 0.2s; } .nav-dd-item:hover .nav-dd-arrow, .nav-dd-item.active .nav-dd-arrow { color: var(--c-blue); transform: translateX(3px); } /* Lab / experimental item accent */ .nav-dd-item--lab .nav-dd-icon { border-color: var(--c-purple, rgba(160,80,255,0.4)); } .nav-dd-item--lab .nav-dd-icon .icon { stroke: var(--c-purple, rgba(160,80,255,0.7)); } .nav-dd-item--lab .nav-dd-title { color: var(--c-purple, rgba(160,80,255,0.9)); } .nav-dd-item--lab::before { background: var(--c-purple, rgba(160,80,255,1)); } /* Dropdown footer */ .nav-dropdown-footer { padding: 8px 14px; border-top: 1px solid var(--header-border); display: flex; align-items: center; } .nav-dd-home { display: inline-flex; align-items: center; gap: 6px; font-family: 'Tektur', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-gray-60); text-decoration: none; transition: color 0.2s; } .nav-dd-home .icon { width: 12px; height: 12px; stroke: currentColor; fill: none; } .nav-dd-home:hover, .nav-dd-home.active { color: var(--c-blue); } /* === THEME TOGGLE === */ .theme-toggle-wrap {display: flex; align-items: center; gap: var(--gapm2); flex-shrink: 0;} .hud-data-pill {font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-gray-60); letter-spacing: 1px; white-space: nowrap;} #theme-toggle {position: relative; width: 44px; height: 24px; background: transparent; border: 1.5px solid var(--c-blue-40); border-radius: 4px; corner-shape: bevel; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, box-shadow 0.3s; flex-shrink: 0; overflow: hidden; padding: 0;} #theme-toggle::before {content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 3px; corner-shape: bevel; background: var(--c-blue-60); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.3s; box-shadow: 0 0 8px rgba(2,217,255,0.5);} [data-theme="dark"] #theme-toggle::before {transform: translateX(20px);} #theme-toggle:hover {border-color: var(--c-blue); box-shadow: 0 0 12px rgba(2,217,255,0.3);} .theme-icon-sun, .theme-icon-moon {position: absolute; width: 13px; height: 13px; transition: opacity 0.3s;} .theme-icon-sun {left: 5px; color: var(--c-yellow); stroke: var(--c-yellow); fill: none;} .theme-icon-moon {right: 5px; color: var(--c-blue); stroke: var(--c-blue); fill: none;} [data-theme="dark"] .theme-icon-sun {opacity: 0.3;} [data-theme="dark"] .theme-icon-moon {opacity: 1;} [data-theme="light"] .theme-icon-sun {opacity: 1;} [data-theme="light"] .theme-icon-moon {opacity: 0.3;} /* === PAGE LAYOUT === */ .page-wrap {max-width: 1980px; margin: 0 auto; padding: var(--gap);} /* === PAGE HEADER === */ .page-hero {padding: var(--gapm5) 0 var(--gapb2) 0;} .page-hero .hud-meta {font-family: 'Tektur', monospace; font-size: 10px; color: var(--c-gray-60); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--gapm1);} .page-hero .hud-meta span {color: var(--c-blue-60);} .page-hero h1 {margin: var(--gapm2) 0;} .page-hero .page-desc {font-size: 14px; max-width: 900px; line-height: 1.6; margin-top: var(--gapm1);} /* === CODE BLOCK === */ .showcase-code {border-top: 1px solid var(--br-gray);} .code-toolbar {display: flex; align-items: center; justify-content: space-between; padding: var(--gapm3) var(--gapm1); background: var(--code-bg); border-bottom: 1px solid var(--code-border);} .code-lang {font-family: 'Tektur', monospace; font-size: 10px; color: var(--c-blue-60); text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; gap: var(--gapm3);} .code-lang svg.icon {width: 12px; height: 12px; color: var(--c-blue-60); stroke: currentColor; fill: none;} .btn-copy {cursor: pointer; position: relative; overflow: hidden;} .btn-copy.copied {--azure: var(--c-green) !important;} pre.blockkod {background: var(--code-bg) !important; border: none !important; padding: var(--gapm1) !important;} pre.blockkod code {font-size: 12px !important; line-height: 1.5 !important; color: var(--text-dark) !important;} [data-theme="dark"] pre.blockkod code {color: #7ecfee !important;} [data-theme="dark"] pre.blockkod {background: rgba(4,12,28,0.95) !important; background-image: linear-gradient(rgba(2,217,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(2,217,255,0.02) 1px, transparent 1px) !important; background-size: 8px 8px !important;} /* === INDEX PAGE === */ .index-hero {padding: var(--gapb5) 0 var(--gapb3) 0; text-align: center; position: relative;} .index-hero::before {content: 'ARD_SYSTEM // ONLINE'; font-family: 'Tektur', monospace; font-size: 13px; letter-spacing: 5px; color: var(--c-blue-40); display: block; margin-bottom: var(--gapm1);} .index-hero h1 {font-family: 'Handjet', sans-serif; font-size: 7em; color: var(--c-blue); text-shadow: 0 0 40px rgba(2,217,255,0.45), 0 0 80px rgba(2,217,255,0.2); letter-spacing: 10px; display: block; width: 100%; line-height: 1.1;} .index-hero .hero-sub {font-size: 15px; color: var(--text-dark); letter-spacing: 5px; text-transform: uppercase; margin-top: var(--gapm2);} .stat-bar {display: flex; gap: var(--gapm1); justify-content: center; flex-wrap: wrap; margin: var(--gapb1) 0;} .stat-pill {font-family: 'Tektur', monospace; font-size: 12px; color: var(--c-gray-60); border: 1px solid var(--br-gray); padding: 8px 20px; border-radius: 20px; letter-spacing: 1.5px;} .stat-pill span {color: var(--c-blue);} /* === COMPONENT CARDS (INDEX) === */ .component-cards-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); margin: var(--gap) 0;} .comp-card {position: relative; background: var(--showcase-bg); border: 1px solid var(--br-gray); border-top: 3px solid var(--c-blue-40); border-radius: 8px 0; corner-shape: bevel; padding: var(--gap); text-decoration: none; display: flex; flex-direction: column; gap: var(--gapm2); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; overflow: hidden; backdrop-filter: blur(8px);} .comp-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(0,150,255,0.02) 1px,transparent 1px), linear-gradient(90deg, rgba(0,150,255,0.02) 1px,transparent 1px); background-size: 8px 8px; pointer-events: none; z-index: 0;} .comp-card:hover {border-color: var(--c-blue-60); border-top-color: var(--c-blue); box-shadow: 0 8px 30px rgba(2,217,255,0.12), 0 0 15px rgba(2,217,255,0.08); transform: translateY(-4px); color: var(--text);} .comp-card-icon {width: 40px; height: 40px; border: 1px solid var(--br-gray); border-radius: 6px 0; corner-shape: bevel; display: flex; align-items: center; justify-content: center; background: rgba(2,217,255,0.05); position: relative; z-index: 1;} .comp-card-icon svg.icon {width: 20px; height: 20px; color: var(--c-blue); stroke: currentColor; fill: none;} .comp-card-title {font-family: 'Handjet', sans-serif; font-size: 22px; color: var(--text); text-transform: uppercase; letter-spacing: 2px; position: relative; z-index: 1;} .comp-card-desc {font-size: 12px; color: var(--text-dark); line-height: 1.5; position: relative; z-index: 1;} .comp-card-count {font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-blue-40); text-transform: uppercase; letter-spacing: 1px; margin-top: auto; position: relative; z-index: 1;} .comp-card-corner {position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-top: 1.5px solid var(--c-blue-40); border-right: 1.5px solid var(--c-blue-40);} /* === COLOR PALETTE PAGE === */ .color-swatch-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--gapm2);} .color-swatch {border-radius: 4px 0; corner-shape: bevel; overflow: hidden; border: 1px solid var(--br-gray); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;} .color-swatch:hover {transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,0.12);} .swatch-preview {height: 64px; width: 100%;} .swatch-info {padding: var(--gapm3) var(--gapm2); background: var(--showcase-bg);} .swatch-name {font-family: 'Tektur', monospace; font-size: 10px; color: var(--text-dark); letter-spacing: 1px;} .swatch-value {font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-gray-60); margin-top: 2px; user-select: all;} /* === ICON PAGE === */ .icons-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--gapm2);} .icon-item {display: flex; flex-direction: column; align-items: center; gap: var(--gapm3); padding: var(--gapm1); border: 1px solid var(--br-gray); border-radius: 4px 0; corner-shape: bevel; background: var(--showcase-bg); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;} .icon-item:hover {border-color: var(--c-blue-40); box-shadow: 0 0 12px rgba(2,217,255,0.1); background: var(--nav-active-bg);} .icon-item svg.icon {width: 24px; height: 24px; color: var(--c-blue); stroke: currentColor; fill: none;} .icon-item span {font-family: 'Tektur', monospace; font-size: 9px; color: var(--text-dark); text-align: center; letter-spacing: 0.5px; word-break: break-all;} /* === HIGH-TECH HUD FOOTER === */ .site-footer { position: relative; border-top: 1px solid rgba(2, 217, 255, 0.25); background: var(--footer-bg, rgba(255, 255, 255, 0.65)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 24px 0 20px 0; margin-top: 60px; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; } [data-theme="dark"] .site-footer { background: rgba(6, 15, 32, 0.85); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(2, 217, 255, 0.15); } .footer-glow-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(2, 217, 255, 0.3) 20%, var(--c-blue) 50%, var(--neon, #3efff5) 75%, transparent 100%); box-shadow: 0 0 12px var(--c-blue, #02d9ff); } .footer-inner { max-width: 1980px; margin: 0 auto; padding: 0 var(--gap, 24px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .footer-col-brand { display: flex; align-items: center; gap: 16px; } .footer-logo { display: flex; align-items: center; gap: 10px; } .footer-logo-mark { width: 32px; height: 32px; border: 1px solid rgba(2, 217, 255, 0.4); border-radius: 6px 0; corner-shape: bevel; background: rgba(2, 217, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--c-blue); box-shadow: 0 0 10px rgba(2, 217, 255, 0.2); } .footer-logo-mark svg.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; } .footer-brand-title { font-family: 'Handjet', sans-serif; font-size: 18px; color: var(--c-blue); letter-spacing: 2px; text-transform: uppercase; display: block; text-shadow: 0 0 8px rgba(2, 217, 255, 0.4); } .footer-brand-sub { font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-gray-60); letter-spacing: 1px; text-transform: uppercase; display: block; } .footer-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(40, 199, 111, 0.1); border: 1px solid rgba(40, 199, 111, 0.3); border-radius: 4px 0; corner-shape: bevel; font-family: 'Tektur', monospace; font-size: 9px; color: var(--c-green); letter-spacing: 1px; text-transform: uppercase; } .footer-status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 8px var(--c-green); animation: pulseStatus 2s infinite ease-in-out; } @keyframes pulseStatus { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } .footer-col-tech { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .tech-tag-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .tech-tag { font-family: 'Tektur', monospace; font-size: 9px; padding: 2px 8px; background: rgba(2, 217, 255, 0.06); border: 1px solid rgba(2, 217, 255, 0.2); border-radius: 3px; color: var(--c-blue); letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease; } .tech-tag:hover { background: rgba(2, 217, 255, 0.15); box-shadow: 0 0 8px rgba(2, 217, 255, 0.3); } .footer-copy-text { font-family: 'Tektur', monospace; font-size: 10px; color: var(--c-gray-60); letter-spacing: 0.5px; } .footer-copy-text strong { color: var(--c-blue); } .footer-col-meta { display: flex; align-items: center; gap: 10px; } .hud-meta-badge { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 10px; background: rgba(2, 217, 255, 0.04); border: 1px solid rgba(2, 217, 255, 0.18); border-radius: 4px 0; corner-shape: bevel; font-family: 'Tektur', monospace; } .hud-meta-badge .meta-label { font-size: 8px; color: var(--c-gray-40); letter-spacing: 1.5px; } .hud-meta-badge .meta-val { font-size: 10px; color: var(--c-blue); font-weight: 600; letter-spacing: 1px; } .hud-meta-badge.glow { border-color: rgba(62, 255, 245, 0.4); background: rgba(62, 255, 245, 0.08); box-shadow: 0 0 10px rgba(62, 255, 245, 0.15); } .hud-meta-badge.glow .meta-val { color: var(--neon, #3efff5); text-shadow: 0 0 6px rgba(62, 255, 245, 0.6); } .heading-showcase { background: var(--bg-glass-white, rgba(255, 255, 255, 0.7)); border: 1px solid var(--br-gray, rgba(2, 217, 255, 0.25)); border-left: 4px solid var(--c-blue, #02d9ff); border-radius: 12px 0 12px 0; corner-shape: bevel; margin-bottom: var(--gap, 24px); box-shadow: var(--shadow-1, 0 8px 32px rgba(0, 0, 0, 0.06)); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .heading-showcase-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(2, 217, 255, 0.05); border-bottom: 1px solid rgba(2, 217, 255, 0.15); flex-wrap: wrap; gap: 12px; } .heading-showcase-title { display: flex; align-items: center; gap: 10px; } .heading-showcase-title h3 { margin: 0; font-family: 'Handjet', sans-serif; font-size: 22px; letter-spacing: 1.5px; color: var(--text); text-transform: uppercase; } .heading-tag { font-family: 'Tektur', monospace; font-size: 10px; padding: 3px 8px; border-radius: 4px 0 4px 0; corner-shape: bevel; background: rgba(2, 217, 255, 0.12); color: var(--c-blue); border: 1px solid rgba(2, 217, 255, 0.3); text-transform: uppercase; letter-spacing: 1px; } .heading-tabs-nav { display: flex; align-items: center; gap: 8px; } .heading-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: 1px solid rgba(2, 217, 255, 0.2); border-radius: 4px 0; corner-shape: bevel; font-family: 'Tektur', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dark); cursor: pointer; transition: all 0.2s ease; } .heading-tab-btn:hover { color: var(--c-blue); border-color: var(--c-blue-40); background: rgba(2, 217, 255, 0.08); } .heading-tab-btn.active { color: var(--c-blue); border-color: var(--c-blue); background: rgba(2, 217, 255, 0.15); box-shadow: 0 0 10px rgba(2, 217, 255, 0.2); font-weight: 600; } .heading-tab-btn svg.icon { width: 14px; height: 14px; stroke: currentColor; fill: none; } .heading-showcase-body { padding: 20px; } .demo-col { border-radius: 8px 0 8px 0; corner-shape: bevel; padding: 20px; transition: all 0.3s ease; } .demo-dark { background: var(--bg-color); } .demo-heading-group { display: flex; flex-direction: column; gap: 12px; } .demo-heading-group > * { cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; } .demo-heading-group > *:hover { opacity: 0.85; transform: translateX(4px); } .demo-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px dashed rgba(2, 217, 255, 0.2); font-family: 'Tektur', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; } .demo-light .demo-col-header { color: #0284c7; } .demo-dark .demo-col-header { color: #3efff5; } .demo-badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .demo-light .demo-badge-dot { background: #0284c7; box-shadow: 0 0 6px rgba(2, 132, 199, 0.4); } .demo-dark .demo-badge-dot { background: #3efff5; box-shadow: 0 0 8px rgba(62, 255, 245, 0.6); } /* === DEMO GAP === */ .gap-card { margin: var(--gapb3) auto; border-radius: var(--gap); corner-shape: bevel; padding: var(--gap); width: 100%; max-width: 1100px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); } .gap-card__header { margin-bottom: 28px; text-align: center; } .gap-card__subtitle { width:100%; text-align: center; font-size: 0.875rem; margin-top: 4px; } .gap-scale-wrapper { overflow-x: auto; padding-bottom: 12px; } .gap-scale { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 800px; padding: 20px 10px 10px; } .gap-item { display: flex; flex-direction: column; align-items: center; flex: 1; } .gap-item__name { font-family: 'Courier New', Courier, monospace; font-size: 0.75rem; color: #64748b; margin-bottom: 8px; white-space: nowrap; } .gap-item__bar { width: var(--size); height: 120px; background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%); border-radius: 4px; corner-shape: bevel; transition: transform 0.2s ease, filter 0.2s ease; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15); } .gap-item:hover .gap-item__bar { transform: translateY(-4px); filter: brightness(1.2); } .gap-item__val { font-size: 0.75rem; font-weight: 600; color: #94a3b8; margin-top: 10px; white-space: nowrap; } .gap-item--base .gap-item__name { color: #f59e0b; font-weight: bold; } .gap-item--base .gap-item__bar { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3); } .gap-item--base .gap-item__val { color: #fbbf24; } /* ===================================================== MOBILE RESPONSIVE — HEADER ===================================================== */ /* ── Tablet (≤ 900px): стискаємо dropdown-панель ── */ @media (max-width: 900px) { /* Dropdown займає всю ширину під хедером */ .nav-dropdown { position: fixed; top: 60px; left: 0; right: 0; min-width: 0; width: 100%; max-height: calc(100dvh - 60px); overflow-y: auto; transform: translateY(-8px); border-radius: 0; z-index: 1500; } .nav-dropdown.is-open { transform: translateY(0); } .nav-dropdown-inner { border-radius: 0; border-left: none; border-right: none; border-top: none; } /* 2 колонки залишаємо до 600px */ .nav-dropdown-grid { grid-template-columns: 1fr 1fr; } /* Ховаємо підпис логотипу */ .logo-sub { display: none; } /* Ховаємо активну мітку сторінки */ .nav-active-label { display: none; } } /* ── Mobile (≤ 600px): 1 колонка ── */ @media (max-width: 600px) { /* Зменшуємо висоту хедера */ .site-header { height: 52px; } .header-inner { height: 52px; padding: 0 12px; gap: 10px; } body { padding-top: 52px; } /* Dropdown від самого верху */ .nav-dropdown { top: 52px; max-height: calc(100dvh - 52px); } /* 1 колонка */ .nav-dropdown-grid { grid-template-columns: 1fr; } /* Більші тапabble-зони */ .nav-dd-item { padding: 12px 16px; } /* Скорочуємо текст тригера */ .nav-trigger-label { display: none; } .nav-trigger { padding: 6px 8px; gap: 6px; border-radius: 4px; } /* Тільки крапки + шеврон залишаються */ .nav-trigger-arrow { width: 16px; height: 16px; } /* Годинник — ховаємо */ .hud-data-pill { display: none; } /* Логотип — залишаємо тільки mark + title */ .logo-title { font-size: 14px; letter-spacing: 2px; } } /* ── Small phone (≤ 380px) ── */ @media (max-width: 380px) { /* Тільки логотип-mark, без тексту */ .logo-text { display: none; } .site-logo { gap: 0; } /* Theme toggle — компактніше */ #theme-toggle { width: 36px; height: 20px; } #theme-toggle::before { width: 13px; height: 13px; } [data-theme="dark"] #theme-toggle::before { transform: translateX(16px); } } /* ── Overlay-бекдроп при відкритому меню на мобільних ── */ @media (max-width: 900px) { .nav-dropdown-backdrop { display: block; position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); z-index: 1499; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .nav-dropdown-backdrop.is-visible { opacity: 1; pointer-events: auto; } } @media (max-width: 600px) { .nav-dropdown-backdrop { inset: 52px 0 0 0; } } /* ── Скролбар усередині dropdown на мобільних ── */ .nav-dropdown::-webkit-scrollbar { width: 3px; } .nav-dropdown::-webkit-scrollbar-track { background: transparent; } .nav-dropdown::-webkit-scrollbar-thumb { background: var(--c-blue-40); border-radius: 2px; }