. z-index на нём создавал СТУПЕНЬ НАЛОЖЕНИЯ, внутри которой любое число бессильно: лайтбокс со своим z-index: 200 всё равно оставался на «этаже» main (1) и уходил под шапку (100) — крестик не нажимался, шапка светилась поверх полноэкранной картинки. Позиционирование здесь нужно только чтобы контент был над свечением body::before (оно ниже по z-index и не ловит мышь), а этого достаточно и с auto. */ body > main { z-index: auto; } /* Landmark wrapper for the skip link. It is a flex child of , so it must not shrink below its content — the footer's margin-top:auto still does the work of pinning short pages to the bottom. */ main { flex: 0 0 auto; } /* Focused programmatically by the skip link; the ring belongs on the first heading a user reads, not around the whole page. */ main:focus { outline: none; } a { color: var(--sd-accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--sd-accent-hover); } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; margin: 0; } ::selection { background: var(--sd-accent-soft); color: var(--sd-text); } :focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; border-radius: var(--sd-radius-sm); } /* Skip link — the nav repeats seven links on every page, so a keyboard or screen-reader user needs a way past it. Off-screen until focused rather than display:none, which would take it out of the tab order entirely. */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--sd-radius-sm); background: var(--sd-accent); color: var(--sd-on-accent); font-size: 14px; font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: 12px; color: var(--sd-on-accent); } /* ========================================================================== Layout primitives ========================================================================== */ .container { max-width: var(--sd-maxw); margin: 0 auto; padding: 0 24px; } section { padding: 96px 24px; } /* Templates drop content straight into

; centre it without asking every page to wrap things in an extra div. */ section > * { max-width: var(--sd-maxw); margin-left: auto; margin-right: auto; } section h2 { font-size: clamp(26px, 3.2vw, 34px); text-align: center; margin-bottom: 12px; } section p.section-subtitle { text-align: center; color: var(--sd-text-muted); margin: 0 auto 48px; max-width: 620px; font-size: 16px; } .eyebrow { display: block; text-align: center; font-family: var(--sd-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-accent); margin-bottom: 14px; } /* ========================================================================== Navigation ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--sd-nav-h); padding: 0 24px; border-bottom: 1px solid var(--sd-border); background: color-mix(in srgb, var(--sd-bg-900) 82%, transparent); backdrop-filter: saturate(150%) blur(12px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: var(--sd-maxw); margin: 0 auto; } .nav .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--sd-text); flex-shrink: 0; } .nav .logo:hover { color: var(--sd-text); } /* Brand lockup — square icon + live text wordmark (templates/_macros.html). The icon is a full-colour SVG, so it is an rather than inlined: inlining it twice per page would duplicate its gradient ids. */ .logo-mark { display: block; flex-shrink: 0; } .logo-word { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .footer-brand .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; color: var(--sd-text); align-self: flex-start; } .footer-brand .logo:hover { color: var(--sd-accent); } .nav .links { display: flex; align-items: center; gap: 4px; } .nav .links a { padding: 8px 12px; border-radius: var(--sd-radius-sm); color: var(--sd-text-muted); font-size: 14px; font-weight: 500; transition: color 0.15s ease, background 0.15s ease; } .nav .links a:hover { color: var(--sd-text); background: var(--sd-bg-700); } .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav .links a.cta, .nav-actions a.cta { background: var(--sd-accent); color: var(--sd-on-accent); padding: 8px 16px; border-radius: var(--sd-radius-sm); font-weight: 600; } .nav .links a.cta:hover, .nav-actions a.cta:hover { background: var(--sd-accent-hover); color: var(--sd-on-accent); } /* Language switcher — compact segmented control. */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); background: var(--sd-bg-800); } .lang-switch a { padding: 3px 8px; border-radius: 6px; font-family: var(--sd-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--sd-text-muted); background: transparent; } .lang-switch a:hover { color: var(--sd-text); background: var(--sd-bg-700); } .lang-switch a.active { color: var(--sd-on-accent); background: var(--sd-accent); } .lang-switch a.active:hover { background: var(--sd-accent-hover); color: var(--sd-on-accent); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); background: var(--sd-bg-800); color: var(--sd-text); cursor: pointer; } .nav-toggle:hover { border-color: var(--sd-border-strong); } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .nav .links { position: absolute; top: var(--sd-nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border-bottom: 1px solid var(--sd-border); background: var(--sd-bg-900); box-shadow: var(--sd-shadow-md); } .nav .links[hidden] { display: none; } .nav .links a { padding: 12px; font-size: 15px; } .nav .links a.cta { text-align: center; margin-top: 6px; } /* The whole box, not just the switch inside it: an empty flex child still claims a slot in space-between, which pushed the burger to the middle of the bar instead of the right edge. */ .nav-actions { display: none; } .nav .links .lang-switch { display: inline-flex; align-self: flex-start; margin-top: 8px; } /* The panel can outgrow a short phone screen in landscape. */ .nav .links { max-height: calc(100vh - var(--sd-nav-h)); overflow-y: auto; } } @media (max-width: 380px) { /* Logo placeholder (132px) + burger + padding is a tight fit on a 375px phone; trim the side padding rather than let the bar overflow. */ .nav { padding: 0 16px; } } @media (min-width: 901px) { .nav .links .lang-switch { display: none; } .nav .links[hidden] { display: flex; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--sd-radius-sm); border: 1px solid var(--sd-border-strong); background: var(--sd-bg-700); color: var(--sd-text); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:hover { background: var(--sd-bg-800); border-color: var(--sd-accent-line); color: var(--sd-text); } .btn.primary { background: var(--sd-accent); border-color: var(--sd-accent); color: var(--sd-on-accent); } .btn.primary:hover { background: var(--sd-accent-hover); border-color: var(--sd-accent-hover); color: var(--sd-on-accent); } .btn.ghost { background: transparent; border-color: var(--sd-border); } .btn.ghost:hover { background: var(--sd-bg-800); border-color: var(--sd-border-strong); } .btn.danger { background: transparent; border-color: var(--sd-danger); color: var(--sd-danger); } .btn.danger:hover { background: var(--sd-danger-soft); border-color: var(--sd-danger); color: var(--sd-danger); } .btn.block { width: 100%; } .btn[aria-disabled="true"], .btn.is-disabled { opacity: 0.5; pointer-events: none; } /* ========================================================================== Badges & chips ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid var(--sd-accent-line); border-radius: 999px; background: var(--sd-accent-soft); color: var(--sd-accent); font-size: 13px; font-weight: 500; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-accent); } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 0; } .chip { padding: 7px 14px; border: 1px solid var(--sd-border); border-radius: 999px; background: var(--sd-bg-800); color: var(--sd-text-muted); font-family: var(--sd-font-mono); font-size: 13px; } /* ========================================================================== Hero ========================================================================== */ .hero { padding: clamp(64px, 9vw, 120px) 24px 72px; text-align: center; } .hero > * { max-width: var(--sd-maxw); margin-left: auto; margin-right: auto; } .hero h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; letter-spacing: -0.035em; margin: 24px auto 20px; max-width: 15ch; } /* Terminal caret after the headline — the one animated element above the fold. Sized in em so it tracks the fluid h1, and rendered as a box rather than a literal "_" glyph so it sits on the cap line like a real cursor. */ .hero h1 .caret { display: inline-block; width: 0.5em; height: 0.72em; margin-left: 0.14em; vertical-align: -0.02em; background: var(--sd-accent); border-radius: 2px; animation: sd-blink 1.15s steps(1, end) infinite; } @keyframes sd-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } .hero p.subtitle { color: var(--sd-text-muted); font-size: clamp(16px, 1.6vw, 18px); max-width: 660px; margin: 0 auto 32px; } .hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hero .actions .btn { padding: 13px 24px; font-size: 15px; } .hero .hero-note { color: var(--sd-text-muted); font-size: 13px; margin: 18px auto 0; } /* Shell line under the CTAs, typed by typewriter.js. min-height reserves the row up front so a shorter command never shifts the layout. */ .hero-terminal { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-height: 22px; margin: 28px auto 0; font-family: var(--sd-font-mono); font-size: 14px; color: var(--sd-text-muted); } .hero-terminal__prompt { color: var(--sd-accent); } .hero-terminal__line { white-space: pre; } .hero-terminal__caret { width: 8px; height: 15px; align-self: center; background: var(--sd-accent); border-radius: 1px; } /* Solid while characters are moving; blinking only on a finished line. */ .hero-terminal.is-resting .hero-terminal__caret { animation: sd-blink 1.15s steps(1, end) infinite; } .hero-visual { margin-top: 56px; } /* Product screenshot in an app-window frame. */ .window { border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); background: var(--sd-bg-800); overflow: hidden; box-shadow: var(--sd-shadow-lg); } .window-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--sd-border); background: var(--sd-bg-700); } .window-dots { display: flex; gap: 6px; flex-shrink: 0; } .window-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--sd-border-strong); } .window-title { flex: 1; text-align: center; font-family: var(--sd-font-mono); font-size: 12px; color: var(--sd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .window-body { display: block; max-height: 440px; overflow: hidden; } /* The source screenshots carry a lot of empty canvas at the bottom; crop from the top instead of letting the hero grow to their full height. */ .window-body img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top center; } /* ========================================================================== Cards & grids ========================================================================== */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .card { background: var(--sd-bg-800); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); padding: 24px; transition: border-color 0.18s ease, background 0.18s ease; } .card h3 { font-size: 17px; margin: 0 0 8px; } .card p { color: var(--sd-text-muted); font-size: 14px; margin: 0; } .card:hover { border-color: var(--sd-border-strong); } .feature-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 16px; border: 1px solid var(--sd-accent-line); border-radius: var(--sd-radius-sm); background: var(--sd-accent-soft); color: var(--sd-accent); } .feature-icon svg { width: 19px; height: 19px; } /* ========================================================================== Pricing ========================================================================== */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; } .plans .card { display: flex; flex-direction: column; padding: 28px; } @media (max-width: 900px) { /* auto-fit would give 2+1 here, leaving one tier stranded on its own row next to an empty cell. Three plans compared side by side only work as a row when all three fit; below that they read better as an ordered stack, in the same Basic → Pro → Business order as the copy. */ .plans { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } } .plans .card.is-featured { border-color: var(--sd-accent-line); background: linear-gradient(180deg, var(--sd-accent-soft), transparent 180px), var(--sd-bg-800); } .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .plan-badge { padding: 3px 10px; border-radius: 999px; background: var(--sd-accent); color: var(--sd-on-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .price { display: flex; align-items: baseline; gap: 8px; color: var(--sd-text); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 22px; } .price .period { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--sd-text-muted); } .plans ul { list-style: none; padding: 0; margin: 0 0 26px; color: var(--sd-text-muted); font-size: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .plans li { display: flex; align-items: flex-start; gap: 10px; } .plans li::before { content: "✓"; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--sd-accent-soft); color: var(--sd-accent); font-size: 11px; font-weight: 700; } .plans-note { text-align: center; color: var(--sd-text-muted); font-size: 13px; margin: 28px auto 0; max-width: 640px; } /* ========================================================================== Carousel (markup + behaviour unchanged, restyled only) ========================================================================== */ .carousel-wrap { max-width: 940px; margin: 0 auto; } .carousel { display: flex; align-items: center; gap: 12px; } .carousel-viewport { flex: 1; min-width: 0; overflow: hidden; } .carousel-track { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; position: relative; will-change: transform; } .carousel-slide { flex: 0 0 auto; width: 78%; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; background: var(--sd-bg-800); box-shadow: var(--sd-shadow-md); cursor: pointer; transform: scale(0.86); opacity: 0.4; transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.38s ease; } .carousel-slide.is-active { transform: scale(1); opacity: 1; cursor: zoom-in; } .carousel-slide img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; } .carousel-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sd-border); background: var(--sd-bg-800); color: var(--sd-text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .carousel-btn:hover { border-color: var(--sd-accent-line); color: var(--sd-accent); } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: var(--sd-border-strong); cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .carousel-dot:hover { background: var(--sd-text-muted); } .carousel-dot.is-active { background: var(--sd-accent); width: 20px; border-radius: 999px; } @media (max-width: 720px) { .carousel-slide { width: 100%; } .carousel-btn { width: 34px; height: 34px; } } /* --- Lightbox ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; /* Разметка кладёт лайтбокс внутрь

, а на прямых детей секции действует «section > *» с max-width: var(--sd-maxw) и margin auto — колонка контента шириной 1120 px. Правило доставало и сюда: полноэкранная подложка получала ширину 1120 и margin 0 400px, то есть переставала быть полноэкранной. Стрелки с left/right: 20px уезжали внутрь картинки (замерено: 420 и 1454 px при картинке 218…1703), левая пряталась под ней совсем. Сбрасываем обе величины явно. */ max-width: none; margin: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--sd-scrim); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-img { max-width: 88vw; max-height: 86vh; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow-lg); transform: scale(0.96); transition: transform 0.25s ease; } .lightbox.is-open .lightbox-img { transform: scale(1); } .lightbox-close, .lightbox-btn { position: absolute; /* Картинке задан transform (scale), а это своя ступень наложения: без z-index кнопки и картинка рисуются в порядке разметки, и «назад», стоящая ДО , оказывается под ней — видна ровно одна стрелка. */ z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--sd-border); background: var(--sd-bg-800); color: var(--sd-text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .lightbox-close:hover, .lightbox-btn:hover { border-color: var(--sd-accent-line); color: var(--sd-accent); } .lightbox-close { top: 20px; right: 24px; width: 40px; height: 40px; font-size: 22px; line-height: 1; } .lightbox-btn { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; } .lightbox-btn.prev { left: 20px; } .lightbox-btn.next { right: 20px; } @media (max-width: 640px) { .lightbox-btn { width: 38px; height: 38px; } .lightbox-btn.prev { left: 8px; } .lightbox-btn.next { right: 8px; } .lightbox-close { top: 12px; right: 12px; } } /* ========================================================================== Forms ========================================================================== */ form.stack { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin: 0 auto; } form.stack .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } /* Scoped rather than global so the admin panel's inline-sized inputs keep their own widths. */ form.stack input, form.stack select, form.stack textarea { width: 100%; } form.stack label { font-size: 13px; font-weight: 500; color: var(--sd-text-muted); } form.stack button { margin-top: 6px; } input, select, textarea { background: var(--sd-bg-700); border: 1px solid var(--sd-border-input); border-radius: var(--sd-radius-sm); padding: 11px 13px; color: var(--sd-text); font-family: inherit; font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* No extra opacity: --sd-text-muted is already the dimmest readable step (5.6:1 on an input). Fading it further dropped placeholders to 3.4:1, under the 4.5:1 minimum — and placeholders here carry real instructions ("Минимум 4 символа"), so they have to be readable. */ input::placeholder, textarea::placeholder { color: var(--sd-text-muted); } input:focus, select:focus, textarea:focus { border-color: var(--sd-accent); box-shadow: 0 0 0 3px var(--sd-accent-soft); } /* The glow above reads as "active", not as "the keyboard is here". Keyboard focus keeps the same solid outline every other control gets — the accent border alone would leave a Tab user guessing between two similar fields. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; } select { appearance: none; cursor: pointer; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--sd-text-muted) 50%), linear-gradient(135deg, var(--sd-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } form.stack textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .form-hint { color: var(--sd-text-muted); font-size: 13px; text-align: center; margin-top: 18px; } /* Explanatory line under a single input — left-aligned with it, unlike the centred .form-hint that closes a whole form. */ .field-hint { color: var(--sd-text-muted); font-size: 12px; margin: 0; } /* Honeypot wrapper. Moved off-canvas rather than display:none — bots that skip hidden fields are exactly the ones worth catching — and paired with aria-hidden + tabindex="-1" in the markup so no real person can reach it. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .alert { padding: 12px 16px; border-radius: var(--sd-radius-sm); margin-bottom: 16px; font-size: 14px; } .alert.error { background: var(--sd-danger-soft); border: 1px solid var(--sd-danger); color: var(--sd-danger); } .alert.success { background: var(--sd-success-soft); border: 1px solid var(--sd-success); color: var(--sd-success); } /* ========================================================================== Step list ========================================================================== */ .step-list { counter-reset: step; list-style: none; padding: 0; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .step-list li { counter-increment: step; position: relative; padding: 16px 18px 16px 58px; background: var(--sd-bg-800); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); color: var(--sd-text-muted); font-size: 14px; } .step-list li::before { content: counter(step); position: absolute; left: 18px; top: 15px; width: 26px; height: 26px; border: 1px solid var(--sd-accent-line); background: var(--sd-accent-soft); color: var(--sd-accent); border-radius: var(--sd-radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--sd-font-mono); font-weight: 500; font-size: 13px; } /* ========================================================================== CTA band ========================================================================== */ .cta-band { max-width: var(--sd-maxw); margin: 0 auto; padding: 56px 32px; text-align: center; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); background: radial-gradient(600px 200px at 50% 0%, var(--sd-accent-glow), transparent 70%), var(--sd-bg-800); } .cta-band h2 { margin-bottom: 12px; } .cta-band p { color: var(--sd-text-muted); max-width: 520px; margin: 0 auto 28px; } .cta-band .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* ========================================================================== Tables (admin only — no public page has a ) ========================================================================== */ table { width: 100%; border-collapse: collapse; background: var(--sd-bg-800); border: 1px solid var(--sd-border); border-radius: var(--sd-radius); overflow: hidden; font-size: 14px; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--sd-border); } th { background: var(--sd-bg-700); color: var(--sd-text-muted); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } /* Top, not middle: a row whose comment wraps to four lines must not push its id and date to the vertical centre of the row. */ td { color: var(--sd-text-muted); vertical-align: top; } tbody tr { transition: background 0.15s ease; } tbody tr:hover { background: var(--sd-bg-700); } tbody tr:last-child td { border-bottom: none; } /* The cell that identifies the row (email, key code) reads as primary text; everything else in the row is supporting detail. */ td.is-key { color: var(--sd-text); font-weight: 500; } td.is-mono { font-family: var(--sd-font-mono); font-size: 12px; } td.is-num { font-family: var(--sd-font-mono); font-size: 12px; color: var(--sd-text-muted); } /* ========================================================================== Admin panel The owner's own tool: never localised, never indexed, never linked from the public site. Same tokens as the rest of the site, but denser — every screen here is a worklist, not a pitch. Nothing below invents a colour. ========================================================================== */ /* --- shell --------------------------------------------------------------- */ /* Mirrors .nav on purpose: the panel is part of the same product, and a second visual language for three pages would be a cost with no payoff. */ .admin-top { position: sticky; top: 0; z-index: 100; padding: 0 24px; border-bottom: 1px solid var(--sd-border); background: color-mix(in srgb, var(--sd-bg-900) 82%, transparent); backdrop-filter: saturate(150%) blur(12px); } .admin-top__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%; max-width: var(--sd-maxw); min-height: var(--sd-nav-h); margin: 0 auto; padding: 10px 0; } .admin-brand { display: flex; align-items: center; gap: 10px; color: var(--sd-text); font-size: 16px; flex-shrink: 0; } .admin-brand:hover { color: var(--sd-text); } /* Says which of the two SSHDesk sites this tab is — the public site and the panel are one deploy and share a favicon. */ .admin-tag { padding: 2px 8px; border: 1px solid var(--sd-accent-line); border-radius: 999px; background: var(--sd-accent-soft); color: var(--sd-accent); font-family: var(--sd-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .admin-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .admin-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid transparent; border-radius: 999px; color: var(--sd-text-muted); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .admin-nav a:hover { background: var(--sd-bg-800); color: var(--sd-text); } .admin-nav a.is-active { border-color: var(--sd-accent-line); background: var(--sd-accent-soft); color: var(--sd-accent); } .admin-nav svg { width: 16px; height: 16px; flex-shrink: 0; } /* Count of untouched requests, next to the menu item. */ .admin-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--sd-accent); color: var(--sd-on-accent); font-family: var(--sd-font-mono); font-size: 11px; line-height: 18px; text-align: center; } /* Pushes the logout button to the far right without a spacer element. */ .admin-out { margin-left: auto; } .admin-out .btn { padding: 8px 14px; font-size: 13px; } .admin-main { width: 100%; max-width: var(--sd-maxw); margin: 0 auto; padding: 36px 24px 96px; } /* --- page head and blocks ------------------------------------------------ */ .admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } .admin-head h1 { font-size: 26px; } .admin-lede { margin: 8px 0 0; max-width: 720px; color: var(--sd-text-muted); font-size: 14px; } /* Deliberately a

, not a

: `section` carries 96px of padding and centres its h2, which is why every admin heading used to need an inline text-align:left to undo it. */ .admin-block { margin-top: 40px; } .admin-block:first-child { margin-top: 0; } .admin-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .admin-block h2 { font-size: 18px; } .admin-block__meta { color: var(--sd-text-muted); font-size: 13px; font-family: var(--sd-font-mono); } .admin-note { margin: 0; padding: 14px 16px; border: 1px solid var(--sd-border); border-left: 2px solid var(--sd-border-strong); border-radius: var(--sd-radius-sm); background: var(--sd-bg-800); color: var(--sd-text-muted); font-size: 13px; line-height: 1.6; max-width: 820px; } .admin-note + .admin-note { margin-top: 10px; } .admin-note code { font-family: var(--sd-font-mono); font-size: 12px; } /* Configuration that is wrong right now, not background reading — it has to read differently from the paragraph above it or it will be skipped. */ .admin-note.is-warning { border-color: var(--sd-warning-soft); border-left-color: var(--sd-warning); background: var(--sd-warning-soft); } .admin-note.is-warning strong { color: var(--sd-warning); } /* An empty list is a state, not a missing table. */ .admin-empty { padding: 44px 24px; border: 1px dashed var(--sd-border-strong); border-radius: var(--sd-radius); color: var(--sd-text-muted); font-size: 14px; text-align: center; } /* Status filter on the leads list. The top margin collapses against the 28px under .admin-head when nothing sits between them, so it only opens a gap when the SMTP warning is actually there. */ .admin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 22px; } .admin-filters .chip { padding: 5px 12px; font-size: 12px; } .admin-filters .chip.is-active { border-color: var(--sd-accent-line); color: var(--sd-accent); background: var(--sd-accent-soft); } /* --- dashboard counters -------------------------------------------------- */ /* 150px, not the ~184px the five cards want on a desktop: auto-fit stretches the tracks anyway, and the smaller floor is what lets a phone show two counters per row instead of one tall column of five. */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .stat-card { display: block; padding: 18px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); background: var(--sd-bg-800); transition: border-color 0.18s ease, background 0.18s ease; } .stat-card__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 14px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); background: var(--sd-bg-700); color: var(--sd-text-muted); } .stat-card__icon svg { width: 17px; height: 17px; } .stat-card .value { font-family: var(--sd-font-mono); font-size: 30px; line-height: 1.1; font-weight: 500; color: var(--sd-text); } .stat-card .label { margin-top: 6px; color: var(--sd-text-muted); font-size: 13px; } /* The counters are all equal until one of them is work waiting to be done. */ .stat-card.is-live { border-color: var(--sd-accent-line); } .stat-card.is-live .stat-card__icon { border-color: var(--sd-accent-line); background: var(--sd-accent-soft); color: var(--sd-accent); } .stat-card.is-live .value { color: var(--sd-accent); } a.stat-card { color: inherit; } a.stat-card:hover { border-color: var(--sd-accent-line); background: var(--sd-bg-700); color: inherit; } /* --- tables -------------------------------------------------------------- */ /* Wide tables scroll sideways inside their own box rather than pushing the page out; the modifier is for the eight-column leads list. */ .admin-scroll { overflow-x: auto; border-radius: var(--sd-radius); } .admin-scroll table { min-width: 620px; } .admin-scroll--wide table { min-width: 940px; } .nowrap { white-space: nowrap; } /* Comments are free text and occasionally long; cap the column instead of letting one request stretch the whole table. */ .lead-comment { max-width: 300px; white-space: pre-wrap; word-break: break-word; } /* Name and address are one fact about one person, not two columns. */ .lead-who { display: flex; flex-direction: column; gap: 2px; } .lead-who__name { color: var(--sd-text); font-weight: 500; } /* Plan is categorical: a tag reads as one at a glance, a word does not. */ .plan-tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--sd-border-strong); border-radius: 999px; font-family: var(--sd-font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--sd-text-muted); white-space: nowrap; } .plan-tag--pro { border-color: var(--sd-accent-line); background: var(--sd-accent-soft); color: var(--sd-accent); } .plan-tag--business { border-color: var(--sd-success); background: var(--sd-success-soft); color: var(--sd-success); } .plan-tag--trial { border-color: var(--sd-warning); background: var(--sd-warning-soft); color: var(--sd-warning); } /* Yes/no column. The word alone is fine for a screen reader; the dot is what makes a column of twenty rows scannable. */ .flag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-border-input); } .flag.is-yes { color: var(--sd-text); } .flag.is-yes::before { background: var(--sd-success); } .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--sd-border-strong); font-size: 12px; white-space: nowrap; } .status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .status--new { border-color: var(--sd-accent-line); background: var(--sd-accent-soft); color: var(--sd-accent); } .status--in_progress { border-color: var(--sd-warning); background: var(--sd-warning-soft); color: var(--sd-warning); } .status--closed { color: var(--sd-text-muted); } .status-form { display: flex; gap: 6px; margin-top: 8px; } .status-form select { padding: 5px 28px 5px 9px; font-size: 12px; background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px; } .status-form .btn { padding: 5px 10px; font-size: 12px; } /* --- admin forms --------------------------------------------------------- */ /* The key generator is the one place in the panel where the owner writes rather than reads, so it gets a surface of its own instead of floating inline-styled controls. */ .admin-form-card { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 20px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius); background: var(--sd-bg-800); } .admin-field { display: flex; flex-direction: column; gap: 7px; } .admin-field label { color: var(--sd-text-muted); font-size: 12px; font-weight: 500; } .admin-field--grow { flex: 1 1 260px; min-width: 200px; } .admin-field--grow input { width: 100%; } .admin-field--count input { width: 92px; } /* Codes are shown exactly once, so they are handed over as one selectable block rather than a line the owner has to reassemble. */ .key-drop { margin: 12px 0 0; padding: 12px 14px; max-height: 260px; overflow: auto; background: var(--sd-bg-900); border-color: var(--sd-success-soft); color: var(--sd-text); line-height: 1.7; user-select: all; } /* Отправка ключа покупателю — прямо в строке таблицы, потому что решение «этому выслать» принимается при взгляде на строку, а не на отдельном экране. Форма узкая намеренно: она не должна спорить с кодом ключа. */ /* min-width, а не подбор ширин на глаз: без него авто-раскладка таблицы отдаёт колонке ровно столько, сколько влезает, и кнопка каждый раз срывается на вторую строку. Здесь она задаёт колонке минимум явно. */ .key-send { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 300px; margin-top: 8px; } /* 150, а не «сколько влезет адрес»: строка таблицы должна остаться в одну линию, а полный адрес всё равно виден в отметке над формой. */ .key-send input[type="email"] { width: 150px; padding: 5px 9px; font-size: 12px; } .key-send select { padding: 5px 26px 5px 9px; font-size: 12px; background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px; } .key-send .btn { padding: 5px 10px; font-size: 12px; } /* Уже отправленный ключ: отметка вместо формы, чтобы один и тот же код не уехал двум людям по невнимательности. Повторить отправку по-прежнему можно — форма под отметкой остаётся. */ .key-sent { display: inline-flex; align-items: center; gap: 6px; color: var(--sd-success); font-size: 12px; white-space: nowrap; } .key-sent svg { width: 13px; height: 13px; } .key-sent__to { color: var(--sd-text-muted); } /* «Когда использован» и «кем» — один факт об одном событии. Двумя колонками таблица переставала помещаться в 1120px, ничего не добавляя. */ .key-used { display: flex; flex-direction: column; gap: 2px; } /* Адрес переносится, а не расширяет таблицу: одна длинная почта иначе задаёт ширину всей колонке и выталкивает её за край (тот же случай, что D-4 в клиенте). */ .key-used__who { font-family: var(--sd-font-sans); font-size: 13px; word-break: break-word; } /* --- login --------------------------------------------------------------- */ /* Its own centred page: the login screen has no nav, so nothing else on it would place the card. */ .admin-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 24px; } .admin-login__card { width: 100%; max-width: 380px; padding: 32px; border: 1px solid var(--sd-border); border-radius: var(--sd-radius-lg); background: var(--sd-bg-800); box-shadow: var(--sd-shadow-md); } .admin-login__brand { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--sd-text); font-size: 18px; } .admin-login__card h1 { margin: 18px 0 6px; font-size: 20px; text-align: center; } .admin-login__card p { margin: 0 0 22px; color: var(--sd-text-muted); font-size: 13px; text-align: center; } .admin-login form.stack { max-width: none; } @media (max-width: 720px) { .admin-top { padding: 0 16px; } .admin-top__inner { gap: 12px; } .admin-out { margin-left: 0; } .admin-main { padding: 24px 16px 64px; } .admin-head h1 { font-size: 22px; } .admin-form-card { padding: 16px; } .admin-field, .admin-field--grow { flex: 1 1 100%; min-width: 0; } .admin-field--count input { width: 100%; } .admin-form-card > .btn { width: 100%; } } /* ========================================================================== Code ========================================================================== */ code, pre, .mono { font-family: var(--sd-font-mono); font-size: 13px; } code, pre { background: var(--sd-bg-700); border: 1px solid var(--sd-border); border-radius: var(--sd-radius-sm); color: var(--sd-text); } pre { padding: 14px; overflow-x: auto; } code { padding: 2px 6px; } /* ========================================================================== Asset placeholders — see ASSETS_TODO.md Every one of these is a stand-in for artwork that does not exist yet. Find them all with: grep -r "data-asset-placeholder" website/ ========================================================================== */ .asset-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 10px; border: 1px dashed var(--sd-accent-line); border-radius: var(--sd-radius-sm); background: linear-gradient(135deg, var(--sd-accent-soft), rgba(53, 231, 194, 0.03) 60%, transparent), var(--sd-bg-700); color: var(--sd-accent); font-family: var(--sd-font-mono); font-size: 11px; line-height: 1.3; text-align: center; overflow: hidden; } .asset-ph__label { font-weight: 500; white-space: nowrap; } .asset-ph__spec { color: var(--sd-text-muted); font-size: 9px; white-space: nowrap; } /* Header lettering slot. */ /* Square mark, used in the footer and on the download cards. */ .asset-ph--mark { width: 44px; height: 44px; gap: 0; } .asset-ph--mark .asset-ph__label { font-size: 9px; } .asset-ph--mark .asset-ph__spec { display: none; } /* Social icon slots in the footer. The network name lives in the title attribute, so only the short label is drawn. */ .asset-ph--social { width: 34px; height: 34px; gap: 0; padding: 0; } .asset-ph--social .asset-ph__label { font-size: 11px; } .asset-ph--social .asset-ph__spec { display: none; } /* ========================================================================== Footer ========================================================================== */ footer { margin-top: auto; border-top: 1px solid var(--sd-border); background: var(--sd-bg-800); padding: 56px 24px 32px; font-size: 14px; } .footer-grid { max-width: var(--sd-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 300px; } .footer-brand p { color: var(--sd-text-muted); margin: 0; font-size: 14px; } .footer-col h4 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sd-text-muted); margin-bottom: 14px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--sd-text-muted); } .footer-col a:hover { color: var(--sd-text); } /* A second heading inside one column needs the gap the first one gets from the column itself. */ .footer-col .footer-col-second { margin-top: 24px; } .footer-bottom { max-width: var(--sd-maxw); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--sd-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--sd-text-muted); font-size: 13px; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-brand { grid-column: 1 / -1; max-width: none; } } /* ========================================================================== Small screens Component-level breakpoints live with their components above; this block is the phone-sized tuning that cuts across all of them. ========================================================================== */ @media (max-width: 640px) { /* 96px of air between sections is right on a desktop and wastes half a phone screen. */ section { padding: 64px 20px; } .container { padding: 0 20px; } .hero { padding: 56px 20px 56px; } /* full-width CTAs, easier to hit with a thumb */ .hero .actions .btn, .cta-band .actions .btn { flex: 1 1 100%; } section p.section-subtitle { margin-bottom: 36px; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .cta-band { padding: 36px 20px; } /* iOS Safari zooms the whole page in when a focused field is under 16px, and never zooms back out. Worth the visual step up on the request and registration forms. */ input, select, textarea { font-size: 16px; } /* 44px is the usual minimum comfortable touch target. */ form.stack input, form.stack select { min-height: 44px; } form.stack button { min-height: 46px; } } /* ========================================================================== Scroll reveal The hidden state is applied by reveal.js, never by the markup — with JS off or broken every section must still be visible, so CSS alone may not hide anything here. ========================================================================== */ .js-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; will-change: opacity, transform; } .js-reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* ========================================================================== Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* A near-zero duration on an infinite blink is a strobe, not a still cursor — the animation has to be switched off outright. */ .hero h1 .caret, .hero-terminal.is-resting .hero-terminal__caret { animation: none; opacity: 1; } /* reveal.js skips its work under this preference too; this is the guard for a class left behind by a preference change mid-session. */ .js-reveal { opacity: 1; transform: none; } }