/* ============================================================ data-loop text font — Inter (variable, латиница+кириллица). Folty остался только в logo.svg; в тексте не используется. ============================================================ */ @font-face { font-family: "Inter"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* JetBrains Mono (variable) — self-hosted, сабсеты как у Google Fonts: браузер качает только нужный по unicode-range. */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-cyrillic.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { /* tweakable — brand gold by default */ --accent: #e0a516; --accent-ink: #102844; /* shared */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Inter", system-ui, sans-serif; --display: "Inter", system-ui, sans-serif; /* brand constants */ --brand-navy: #102844; --brand-gold: #e0a516; --brand-paper: #eef1f4; --brand-sky: #6aaace; /* default theme vars (navy) — so html/unclassed nodes always resolve */ --bg: #102844; --bg-2: #0c1f37; --bg-3: #173557; --ink: #eef1f4; --ink-2: #a7bcd2; --ink-3: #6885a3; --line: rgba(140, 195, 230, 0.14); --line-2: #eef1f4; --code-bg: #0a1c31; --code-ink: #eef1f4; --card: #15314f; --cyan: #6aaace; --grid: rgba(140, 195, 230, 0.10); --grid-faint: rgba(140, 195, 230, 0.035); } /* Console Dark (navy / blueprint) — the only theme */ .dir-b { --bg: #102844; --bg-2: #0c1f37; --bg-3: #173557; --ink: #eef1f4; --ink-2: #a7bcd2; --ink-3: #a7bcd2; --line: rgba(140, 195, 230, 0.14); --line-2: #eef1f4; --code-bg: #0a1c31; --code-ink: #eef1f4; --card: #15314f; --cyan: #6aaace; --grid: rgba(140, 195, 230, 0.10); --grid-faint: rgba(140, 195, 230, 0.035); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--sans); /* 100% = the browser default (16px) but, unlike a hard 16px, it respects a user who bumped their browser font size — and it anchors every rem below. */ font-size: 100%; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Blueprint grid — signature data-loop backdrop (the "stripes") */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-faint) 1px, transparent 1px), linear-gradient(90deg, var(--grid-faint) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px; /* Vertical offset = nav height (68px inner + 1px border) so a full grid line lands exactly at the nav's bottom edge — no thin partial row below it. */ background-position: -1px 69px, -1px 69px, -1px 69px, -1px 69px; } /* keep real content above the grid */ .nav, .hero, .section, .marquee-wrap, .footer, .cta-block { position: relative; z-index: 1; } /* Brand signature — gold accent rule down the left edge */ body::before { content: ""; position: fixed; top: 0; left: 0; bottom: 0; width: 4px; background: var(--accent); z-index: 60; pointer-events: none; } /* Kill horizontal overflow from the off-canvas mobile drawer (a fixed + translateX(100%) element sits 360px past the right edge). The clip must live on the root — overflow on does NOT clip fixed descendants. `clip` (not `hidden`) avoids turning the root into a scroll container, so the sticky nav keeps working. */ html { overflow-x: clip; /* Offset anchor jumps by the sticky nav height (68px) + small gap so the target heading lands snug under the header, not hidden and not far below. */ scroll-padding-top: 80px; scroll-behavior: smooth; } body { overflow-x: clip; transition: background-color 200ms ease, color 200ms ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea { font-family: inherit; color: inherit; } ::selection { background: var(--accent); color: var(--accent-ink); } .mono { font-family: var(--mono); } .display { font-family: var(--display); letter-spacing: -0.025em; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; } /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 40px; height: 68px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.5625rem; letter-spacing: -0.02em; white-space: nowrap; } .logo span { white-space: nowrap; } .logo-mark { width: 28px; height: 28px; position: relative; } .logo .dot { color: var(--accent); } .logo-lockup { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line); line-height: 1; } .logo-word { font-weight: 700; letter-spacing: -0.02em; } /* Raster wordmark (logo.png, 218×49). Height-driven; keep ≤ native for crispness. */ .brand-logo { display: block; height: 50px; width: auto; } .logo-desc { font-family: var(--mono); font-size: 0.5312rem; font-weight: 500; letter-spacing: 0.16em; color: var(--cyan); white-space: nowrap; } .nav-links { display: flex; gap: 28px; margin-left: 12px; } .nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); transition: color 150ms; } .nav-links a:hover { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .nav-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #1fc16b; box-shadow: 0 0 0 3px color-mix(in oklab, #1fc16b 20%, transparent); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px; font-weight: 600; font-size: 0.875rem; letter-spacing: -0.005em; transition: transform 100ms ease, background 150ms, color 150ms, border-color 150ms; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-lg { height: 52px; padding: 0 26px; font-size: 0.9375rem; border-radius: 6px; } /* ===== Hero ===== */ .hero { position: relative; padding: 80px 0 60px; overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 28px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; } .hero h1 { font-family: var(--display); font-size: clamp(3rem, 7vw, 7.5rem); line-height: 0.95; font-weight: 700; letter-spacing: -0.035em; margin-bottom: 24px; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--accent); position: relative; display: inline-block; } .hero h1 em::after { content: ""; position: absolute; inset: auto -4px -2px -4px; height: 6px; background: var(--accent); opacity: 0.2; } .hero-sub { font-size: 1.25rem; line-height: 1.45; color: var(--ink-2); max-width: 560px; margin-bottom: 36px; font-weight: 400; text-wrap: pretty; } .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .hero-meta { margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); } .hero-meta b { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 2px; } /* ===== Section header ===== */ .section { padding: var(--section-py, clamp(41px, 6vw, 68px)) 0; position: relative; } .section-head { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: end; margin-bottom: 60px; } .section-tag { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .section-tag-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 4px; font-size: 0.6875rem; color: var(--accent); } .section-title { font-family: var(--display); font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; } .section-lead { font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); max-width: 540px; margin-left: auto; text-wrap: pretty; } /* ===== API code block ===== */ .api-block { background: var(--code-bg); border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); } .api-side { padding: 24px 28px; font-family: var(--mono); font-size: 0.8438rem; line-height: 1.7; color: var(--code-ink); position: relative; overflow-x: auto; } .api-side + .api-side { border-left: 1px solid #2a2824; } .api-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .api-tabs { display: flex; gap: 4px; } .api-tab { padding: 6px 10px; font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6e6c66; border-radius: 3px; transition: all 120ms; } .api-tab.active { background: #2a2824; color: #ece8dd; } .api-tab:hover:not(.active) { color: #b8b5ad; } .api-side-title { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6e6c66; } .api-copy { font-family: var(--mono); font-size: 0.6875rem; color: #b8b5ad; padding: 4px 8px; border: 1px solid #2a2824; border-radius: 3px; transition: all 120ms; } .api-copy:hover { background: #2a2824; color: #ece8dd; } .api-line { display: block; min-height: 1.7em; } .tok-key { color: #ffb86b; } .tok-str { color: #a8d987; } .tok-num { color: #8ad1ff; } .tok-c { color: #6e6c66; font-style: italic; } .tok-kw { color: #ff8aa0; } .tok-acc { color: var(--accent); font-weight: 600; } /* ===== Map ===== */ .map-block { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; align-items: start; } .map-canvas { position: relative; aspect-ratio: 1 / 1; width: 100%; background: var(--bg-2); overflow: hidden; } .map-info { align-self: stretch; } .map-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 150ms; } .map-pin:hover { transform: translate(-50%, -100%) scale(1.1); } .map-pin.active .map-pin-body { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); } .map-pin-body { width: 32px; height: 32px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; transition: all 200ms; } .map-pin-body span { transform: rotate(45deg); } .map-coord-readout { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 0.6875rem; background: var(--card); color: var(--ink-2); padding: 8px 12px; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1); } .map-coord-readout b { color: var(--ink); } .map-info { padding: 32px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); } .map-info-label { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .map-info-addr { font-family: var(--display); font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; } .map-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); } .map-field-label { font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 2px; } .map-field-value { font-size: 0.875rem; color: var(--ink); font-weight: 500; } .map-field-value.mono { font-family: var(--mono); font-size: 0.8125rem; } /* ===== Features grid ===== */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .feature { background: var(--card); padding: 32px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: background 150ms; } .feature:hover { background: var(--bg-2); } .feature-icon { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink); } .feature h3 { font-family: var(--display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 4px; } .feature p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; } .feature-tag { position: absolute; top: 24px; right: 24px; font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } /* ===== Pricing ===== */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tier { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; } .tier.popular { background: var(--ink); color: var(--bg); border-color: var(--ink); } .tier.popular .tier-feature { color: color-mix(in oklab, var(--bg) 75%, transparent); } .tier.popular .tier-meta { color: color-mix(in oklab, var(--bg) 60%, transparent); } .tier-badge { position: absolute; top: -10px; right: 24px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 3px; font-weight: 600; } .tier-name { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } .tier-price { font-family: var(--display); font-size: 3rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; display: flex; align-items: baseline; gap: 6px; } .tier-price .per { font-size: 0.875rem; font-family: var(--sans); font-weight: 500; color: var(--ink-3); } .tier.popular .tier-price .per { color: color-mix(in oklab, var(--bg) 60%, transparent); } .tier-meta { font-size: 0.8125rem; color: var(--ink-2); } .tier-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 20px; } .tier.popular .tier-features { border-color: color-mix(in oklab, var(--bg) 18%, transparent); } .tier-feature { font-size: 0.875rem; display: flex; gap: 10px; color: var(--ink-2); } .tier-feature::before { content: "→"; font-family: var(--mono); color: var(--accent); } /* ===== Marquee ===== */ .marquee-wrap { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; } .marquee { display: flex; gap: 60px; animation: marquee 40s linear infinite; width: max-content; } .marquee-item { font-family: var(--display); font-size: clamp(1.25rem, calc(0.9rem + 0.9vw), 1.75rem); font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 60px; color: var(--ink-2); white-space: nowrap; } .marquee-item::after { content: "✱"; color: var(--accent); font-size: 1.25rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===== Use cases ===== */ .usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .usecase { border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; background: var(--card); display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; } .usecase-num { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); padding-top: 4px; } .usecase h4 { font-family: var(--display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; } .usecase p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; } /* ===== CTA ===== */ .cta-block { background: var(--ink); color: var(--bg); border-radius: 20px; padding: 80px 60px; text-align: center; position: relative; overflow: hidden; } .cta-block h2 { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.035em; font-weight: 700; line-height: 1; margin-bottom: 16px; text-wrap: balance; } .cta-block h2 em { font-style: normal; color: var(--accent); } .cta-block p { color: color-mix(in oklab, var(--bg) 70%, transparent); font-size: 1.125rem; margin-bottom: 36px; max-width: 540px; margin-left: auto; margin-right: auto; } .cta-block .btn-ghost { border-color: color-mix(in oklab, var(--bg) 25%, transparent); color: var(--bg); } .cta-block .btn-ghost:hover { background: var(--bg); color: var(--ink); } .cta-bg-grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, color-mix(in oklab, var(--bg) 6%, transparent) 0 1px, transparent 1px 80px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--bg) 6%, transparent) 0 1px, transparent 1px 80px); pointer-events: none; } /* ===== Footer ===== */ .footer { padding: 60px 0 40px; border-top: 1px solid var(--line); margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 3fr; gap: 48px; margin-bottom: 60px; } /* The link groups form their own auto-fitting grid: the number of columns is derived from available width (min track 150px), so it collapses to fewer columns on its own as the screen narrows — no fixed breakpoints. Track width is capped (220px) and the grid is packed to the left, so with few columns the leftover space stays on the right instead of stretching the gap between them. */ .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); justify-content: start; gap: 48px; } .footer-brand { display: flex; flex-direction: column; gap: 16px; } /* Footer logo is larger than the nav one (2× the 50px header size). */ .footer-brand .brand-logo { height: 100px; } .footer-brand p { font-size: 0.875rem; color: var(--ink-2); max-width: 280px; } .footer-col h5 { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 16px; font-weight: 500; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 0.875rem; color: var(--ink-2); transition: color 120ms; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); padding-top: 24px; border-top: 1px solid var(--line); } /* ===== Direction B specifics ===== */ .dir-b .btn-ghost { border-color: var(--ink); } .dir-b .btn-ghost:hover { background: var(--ink); color: var(--bg); } .dir-b .tier.popular { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .dir-b .tier.popular .tier-feature::before { color: var(--accent-ink); opacity: 0.7; } .dir-b .tier.popular .tier-meta { color: color-mix(in oklab, var(--accent-ink) 70%, transparent); } .dir-b .tier.popular .tier-features { border-color: color-mix(in oklab, var(--accent-ink) 18%, transparent); } .dir-b .tier.popular .tier-feature { color: color-mix(in oklab, var(--accent-ink) 80%, transparent); } .dir-b .cta-block { background: var(--accent); color: var(--accent-ink); } .dir-b .cta-block p { color: color-mix(in oklab, var(--accent-ink) 75%, transparent); } .dir-b .cta-block h2 em { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } .dir-b .cta-block .btn-primary { background: var(--accent-ink); color: var(--accent); } .dir-b .cta-block .btn-ghost { border-color: color-mix(in oklab, var(--accent-ink) 25%, transparent); color: var(--accent-ink); } .dir-b .cta-block .btn-ghost:hover { background: var(--accent-ink); color: var(--accent); } /* Direction B: more brutal terminal vibe */ .dir-b .hero h1 em::after { background: var(--accent); opacity: 0.35; height: 8px; } /* ===== Misc ===== */ .divider-label { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .fadein { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; } .fadein.visible { opacity: 1; transform: translateY(0); } /* ============================================================ Mobile burger + drawer (landing nav) ============================================================ */ .nav-burger { display: none; width: 40px; height: 40px; border-radius: 6px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; transition: background 120ms; } .nav-burger:hover { background: var(--bg-2); } .nav-burger span { display: block; width: 20px; height: 1.7px; background: var(--ink); border-radius: 1px; transition: transform 220ms ease, opacity 180ms ease; transform-origin: center; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-drawer { position: fixed; top: 60px; right: 0; bottom: 0; width: 100%; max-width: 360px; background: var(--bg); border-left: 1px solid var(--line); z-index: 49; transform: translateX(100%); transition: transform 280ms cubic-bezier(.4,0,.2,1); overflow-y: auto; display: flex; flex-direction: column; visibility: hidden; } .nav-drawer.open { transform: translateX(0); visibility: visible; } .nav-drawer-inner { display: flex; flex-direction: column; padding: 28px 24px 32px; gap: 24px; min-height: 100%; } .nav-drawer-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .nav-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .nav-drawer-list li { border-bottom: 1px solid var(--line); } .nav-drawer-list a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); transition: padding 150ms ease, color 120ms; } .nav-drawer-list a:hover, .nav-drawer-list a:active { color: var(--accent); padding-left: 8px; } .nav-drawer-list a svg { color: var(--ink-3); flex-shrink: 0; } .nav-drawer-cta { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; } .nav-scrim { position: fixed; inset: 60px 0 0 0; background: rgba(0, 0, 0, 0.35); z-index: 48; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: scrim-in 200ms ease both; } .dir-b .nav-scrim { background: rgba(0, 0, 0, 0.55); } @keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 881px) { .nav-drawer, .nav-scrim { display: none !important; } } /* ============================================================ Density modifiers (body.dens-*) ============================================================ */ .dens-compact { --section-py: 64px; --hero-py-t: 56px; --hero-py-b: 40px; } .dens-regular { --section-py: clamp(41px, 6vw, 68px); --hero-py-t: 80px; --hero-py-b: 60px; } .dens-comfy { --section-py: 160px; --hero-py-t: 120px; --hero-py-b: 80px; } .hero { padding: var(--hero-py-t, 80px) 0 var(--hero-py-b, 60px); } /* ============================================================ Type modifiers (body.type-*) - heading font swap ============================================================ */ .type-display { --display: "Inter", system-ui, sans-serif; } .type-mono { --display: "JetBrains Mono", "Inter", ui-monospace, monospace; } .type-system { --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .type-mono h1, .type-mono h2 { letter-spacing: -0.045em; } .type-system h1, .type-system h2 { letter-spacing: -0.025em; } /* ============================================================ Map v3 - real Russia silhouette image + city pins ============================================================ */ .map-russia-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* Multiply: white bg blends with page tan, outline stays dark */ mix-blend-mode: multiply; opacity: 1; pointer-events: none; user-select: none; filter: contrast(1.3) saturate(0); } .dir-b .map-russia-img { /* Dark theme: invert, screen-blend so outline shows as light on dark bg */ mix-blend-mode: screen; filter: invert(1) contrast(1.3) saturate(0); opacity: 0.9; } .city-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; z-index: 2; } .city-pin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: all 150ms ease; flex-shrink: 0; position: relative; z-index: 2; } .city-pin.active .city-pin-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 1px 4px rgba(0,0,0,0.2); transform: scale(1.2); } .city-pin:hover .city-pin-dot { transform: scale(1.15); } .city-pin-label { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: nowrap; background: color-mix(in oklab, var(--card) 94%, transparent); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--line); pointer-events: none; transition: all 150ms ease; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.12); } .city-pin.active .city-pin-label { background: var(--ink); color: var(--bg); border-color: var(--ink); z-index: 3; padding: 5px 9px; } .city-pin-name { font-size: 0.7188rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; } .city-pin.active .city-pin-name { font-size: 0.8125rem; } .city-pin-pop { font-family: var(--mono); font-size: 0.5938rem; opacity: 0.6; line-height: 1; display: none; } .city-pin.active .city-pin-pop { display: block; opacity: 0.85; } /* Label positioning per side */ .city-pin.side-right { flex-direction: row; } .city-pin.side-right .city-pin-label { margin-left: 6px; } .city-pin.side-left { flex-direction: row-reverse; } .city-pin.side-left .city-pin-label { margin-right: 6px; align-items: flex-end; } .city-pin.side-top { flex-direction: column-reverse; align-items: center; } .city-pin.side-top .city-pin-label { margin-bottom: 5px; align-items: center; } .city-pin.side-bottom { flex-direction: column; align-items: center; } .city-pin.side-bottom .city-pin-label { margin-top: 5px; align-items: center; } /* Hover/active pins float on top of nearby labels */ .city-pin:hover { z-index: 5; } .city-pin.active { z-index: 6; } .map-legend { position: absolute; bottom: 14px; left: 14px; background: color-mix(in oklab, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 0.6875rem; font-family: var(--mono); color: var(--ink-2); z-index: 1; } .map-legend-row { display: inline-flex; align-items: center; gap: 8px; } .map-legend-dot { width: 8px; height: 8px; border-radius: 50%; } .map-legend-dot.dim { background: var(--ink); opacity: 0.4; } .map-legend-dot.accent { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent); } .map-info-meta { font-size: 0.8125rem; color: var(--ink-3); margin-top: -8px; } .map-info .muted { color: var(--ink-3); } /* ============================================================ Features hub - 1 token → 3 groups ============================================================ */ .features-hub { display: flex; flex-direction: column; gap: 0; } .hub-top { display: flex; flex-direction: column; align-items: center; } .hub-token { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -30px rgba(0,0,0,0.18); position: relative; z-index: 2; } .hub-token-meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } .hub-token-tag { color: var(--accent); font-weight: 600; } .hub-token-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); } .hub-token-string { font-family: var(--mono); font-size: 1rem; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; } .hub-token-string .tok-c { color: var(--ink-3); } .hub-token-string .tok-kw { color: var(--ink); font-weight: 600; } .hub-token-string .tok-acc { color: var(--accent); } .hub-pipes { width: 100%; max-width: 1000px; height: 80px; display: block; } .hub-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .hub-group { background: var(--card); padding: 28px 26px; display: flex; flex-direction: column; } .hub-group-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); } .hub-group-tag { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; } .hub-group-label { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .hub-group-sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; } .hub-items { list-style: none; display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0; } .hub-item { display: flex; flex-direction: column; gap: 4px; } .hub-item-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .hub-item-tag { font-size: 0.6875rem; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.02em; } .hub-item-ms { font-size: 0.6875rem; color: var(--ink-3); } .hub-item-title { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .hub-item-desc { font-size: 0.8438rem; color: var(--ink-2); line-height: 1.45; text-wrap: pretty; } /* ============================================================ API code block v2 - token coloring (works on both sides) ============================================================ */ .code-block-body { display: flex; flex-direction: column; } .code-line { display: block; min-height: 1.7em; white-space: pre; } .api-side .tok-p { color: var(--code-ink); } .api-side .tok-c { color: #6e6c66; font-style: italic; } .api-side .tok-kw { color: #ff8aa0; } .api-side .tok-kw2 { color: #8ad1ff; font-weight: 600; } .api-side .tok-key { color: #ffb86b; } .api-side .tok-str { color: #a8d987; } .api-side .tok-num { color: #8ad1ff; } .api-side .tok-url { color: #c2a3ff; } .api-side .tok-flag{ color: #ffd66b; } .api-side .tok-op { color: #c0bcb2; } .api-side .tok-acc { color: var(--accent); font-weight: 600; } /* Unify a few residual radii */ .tier { border-radius: 12px; } .btn { border-radius: 4px; } .btn-lg { border-radius: 8px; } .feature-icon { border-radius: 8px; } .usecase { border-radius: 12px; } .features { border-radius: 12px; } /* ============================================================ Responsive overrides — kept LAST so they win the cascade over late-defined component rules (calc, map, etc.) at equal specificity. ============================================================ */ /* responsive */ @media (max-width: 1024px) { .section-head { grid-template-columns: 1fr; gap: 20px; } .section-lead { margin-left: 0; } .features { grid-template-columns: 1fr 1fr; } .pricing { grid-template-columns: 1fr; } .usecases { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 40px; } .footer-cols { gap: 32px; } .map-block { grid-template-columns: 1fr; } .api-block { grid-template-columns: 1fr; } .api-side + .api-side { border-left: none; border-top: 1px solid #2a2824; } .nav-links { display: none; } .features-hub .hub-groups { grid-template-columns: 1fr; gap: 16px; } .features-hub .hub-pipes { display: none; } .map-canvas { aspect-ratio: 1 / 1; } .city-pin-label { font-size: 0.6875rem; } } @media (max-width: 880px) { .nav-status { display: none; } .nav-cta-key { display: none; } .nav-burger { display: inline-flex; } .nav-inner { height: 60px; gap: 16px; } .logo { font-size: 1.0625rem; } .logo .brand-logo { height: 42px; } } @media (max-width: 640px) { /* В шапке остается одна основная кнопка («Регистрация» / «Личный кабинет»); «Войти» доступен в мобильном меню. */ .nav-cta-login.btn-ghost { display: none; } .features { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 32px; } .wrap { padding: 0 20px; } /* Hero compaction */ .hero { padding: 36px 0 32px; } /* One continuous clamp across the whole mobile range (no hard step at 400). */ .hero h1 { font-size: clamp(2.375rem, 11vw, 3.5rem); line-height: 0.98; } .hero-sub { font-size: 1rem; margin-bottom: 26px; } .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; } .hero-cta .btn { width: 100%; justify-content: center; } .btn-lg { height: 48px; font-size: 0.875rem; padding: 0 20px; } .hero-meta { gap: 18px; margin-top: 28px; } .hero-meta > div { flex: 1 1 calc(50% - 9px); } .hero-meta b { font-size: 1.375rem; } .eyebrow { margin-bottom: 20px; font-size: 0.6875rem; } /* Section compaction */ .section { padding: 54px 0 !important; } .section-title { font-size: clamp(1.875rem, 8vw, 2.75rem) !important; } .section-head { margin-bottom: 36px; } .section-lead { font-size: 1rem; } /* Saggest */ /* API block */ .api-side { padding: 18px 16px; font-size: 0.75rem; } .code-line, .api-line { font-size: 0.7188rem; line-height: 1.65; } .api-tabs { gap: 2px; flex-wrap: wrap; } .api-tab { padding: 5px 8px; font-size: 0.625rem; } .api-copy { font-size: 0.625rem; padding: 4px 7px; } /* Map block */ .map-canvas { aspect-ratio: 4 / 5; } .map-info { padding: 22px; border-left: none; border-top: 1px solid var(--line); } .map-info-addr { font-size: 1.375rem; } .map-fields { grid-template-columns: 1fr 1fr; gap: 10px 18px; } .map-field-value { font-size: 0.8125rem; } .map-field-value.mono { font-size: 0.75rem; } .map-legend { font-size: 0.625rem; padding: 8px 10px; bottom: 10px; left: 10px; } .city-pin-name { font-size: 0.625rem; } .city-pin.active .city-pin-name { font-size: 0.6875rem; } .city-pin-dot { width: 8px; height: 8px; border-width: 1.5px; } .city-pin-label { padding: 2px 5px; } /* Features hub */ .hub-token { padding: 16px 18px; width: 100%; box-sizing: border-box; } .hub-token-meta { font-size: 0.625rem; flex-wrap: wrap; justify-content: center; gap: 6px; } .hub-token-string { font-size: 0.8125rem; text-align: center; word-break: break-all; } .hub-group { padding: 22px 20px; } .hub-group-label { font-size: 1.125rem; } .hub-items { gap: 16px; } .hub-item-title { font-size: 0.9375rem; } .hub-item-desc { font-size: 0.8125rem; } /* Calculator */ /* CTA */ .cta-block { padding: 56px 24px; border-radius: 16px; } .cta-block h2 { font-size: clamp(2rem, 9vw, 3rem); } .cta-block p { font-size: 0.9375rem; margin-bottom: 28px; } .cta-block .btn { width: 100%; justify-content: center; } .cta-block > div > div:last-child { flex-direction: column; align-items: stretch; } /* Marquee */ .marquee-wrap { padding: 16px 0; } .marquee { gap: 36px; } .marquee-item { gap: 36px; } /* Footer */ .footer { padding: 40px 0 24px; margin-top: 40px; } /* Whole footer is centered on mobile. Bigger brand mark (beats the .logo .brand-logo 32px rule). */ .footer-brand { gap: 18px; padding-bottom: 30px; align-items: center; text-align: center; } .footer-brand .brand-logo { height: 72px; } .footer-brand p { font-size: 0.9375rem; max-width: none; } /* One divider splits brand from the link grid; groups sit in 2 columns, each centered. The lone last group spans the full width and centers. */ .footer-cols { gap: 28px 20px; justify-content: center; border-top: 1px solid var(--line); padding-top: 28px; text-align: center; } .footer-col:last-child { grid-column: 1 / -1; } .footer-col h5 { font-size: 0.8125rem; color: var(--ink); margin-bottom: 14px; letter-spacing: 0.1em; } .footer-col ul { gap: 14px; align-items: center; } .footer-col a { font-size: 0.9375rem; } .footer-bottom { flex-direction: column; gap: 10px; align-items: center; text-align: center; font-size: 0.625rem; } } @media (max-width: 400px) { .wrap { padding: 0 16px; } .hero-meta { flex-direction: column; gap: 14px; } .map-fields { grid-template-columns: 1fr; } } /* ===== Scroll-to-top button ===== Fixed arrow, bottom-right, stacked just above the chat widget fab (which is 60px tall at bottom:24px). Hidden until scrolled + while the nav drawer is open. Kept LAST so nothing overrides it. */ .scroll-top { position: fixed; right: 24px; bottom: 96px; z-index: 2147482000; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .scroll-top.shown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .scroll-top:hover { transform: translateY(-2px) scale(1); } .scroll-top:active { transform: translateY(0) scale(0.95); } body.nav-drawer-open .scroll-top { opacity: 0; pointer-events: none; } @media (max-width: 480px) { /* Match the chat widget's mobile offset (right/bottom 16px, fab 60px). */ .scroll-top { right: 16px; bottom: 88px; } } /* -- COOKIE NOTICE -------------------------------------------- Согласие на опциональную cookie dl_vid (cookie-notice.js). Левый нижний угол, чтобы не перекрывать чат-кнопку и стрелку «наверх» (обе bottom-right). */ .cookie-notice { position: fixed; left: 24px; bottom: 24px; z-index: 2147482000; width: 440px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); animation: cookie-notice-pop 180ms ease; } @keyframes cookie-notice-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cookie-notice-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .cookie-notice-text code { font-family: var(--mono); font-size: 12px; color: var(--ink); } .cookie-notice-link { color: var(--accent); text-decoration: none; white-space: nowrap; } .cookie-notice-link:hover { text-decoration: underline; } .cookie-notice-actions { display: flex; gap: 10px; justify-content: flex-end; } .cookie-notice-btn { font-family: var(--mono); font-size: 12px; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: transform 120ms ease, background 120ms ease; } .cookie-notice-btn:active { transform: translateY(1px); } .cookie-notice-accept { background: var(--accent); color: var(--accent-ink); } .cookie-notice-accept:hover { transform: translateY(-1px); } .cookie-notice-decline { background: transparent; color: var(--ink); border-color: var(--line); } .cookie-notice-decline:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); } @media (max-width: 560px) { .cookie-notice { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; } } /* ===== Мини-футер юр. информации (site-footer.js) ================== Страницы без полного футера лендинга: кабинет, вход, политика. */ .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); } .site-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .site-footer-links a { color: var(--ink-3); text-decoration: none; transition: color 120ms; } .site-footer-links a:hover { color: var(--ink); } @media (max-width: 560px) { .site-footer { flex-direction: column; align-items: center; text-align: center; } } /* ===== Юридические страницы (privacy.html, oferta.html) ============ */ .legal-wrap { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; } .legal-back { display: inline-block; margin-bottom: 28px; font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); text-decoration: none; } .legal-back:hover { color: var(--ink); } .legal-wrap h1 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 6px; } .legal-meta { color: var(--ink-3); font-size: 0.8125rem; margin: 0 0 36px; } .legal-wrap h2 { font-size: 1.0625rem; margin: 36px 0 12px; } .legal-wrap p, .legal-wrap li { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2, var(--ink)); } .legal-wrap ul { padding-left: 22px; } .legal-wrap li { margin-bottom: 6px; } /* Ссылки в тексте документов должны быть видны без наведения */ .legal-wrap p a, .legal-wrap li a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal-wrap p a:hover, .legal-wrap li a:hover { color: var(--accent); text-decoration-color: var(--accent); } .legal-table-scroll { overflow-x: auto; } .legal-wrap table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin: 12px 0 4px; } .legal-wrap th, .legal-wrap td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.5; } .legal-wrap th { font-family: var(--sans); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .legal-wrap code { font-size: 0.85em; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } /* ==== Документация API (docs.html) ==== */ .legal-wrap pre { background: var(--code-bg); color: var(--code-ink); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; padding: 14px 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0 20px; } .docs-endpoint { font-family: var(--mono); font-size: 1rem; font-weight: 600; margin: 0 0 10px; } .docs-method { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--accent); border-radius: 4px; padding: 2px 7px; margin-right: 8px; vertical-align: 2px; }