/* Локальные шрифты лендинга и страниц документов: CSP font-src 'self', * внешних CDN нет. Файлы собирает scripts/build-web-fonts.sh (латиница + * кириллица; хангыль рисует системный шрифт, как в приложении). */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/onest-regular.woff2") format("woff2"); } @font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/onest-medium.woff2") format("woff2"); } @font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/onest-semibold.woff2") format("woff2"); } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/rubik-bold.woff2") format("woff2"); } /* Лендинг приложения «Дрон-зоны Кореи» (корень домена). * * ⚠️ Палитра сознательно земляная и тёмная, как у Android-приложения: лендинг * это витрина приложения, решение Семёна от 2026-07-31 (дизайн-макет * «Landing RU v2»). Страница карты /map остаётся в прежней светлой пастели, * правило «сайт светлый» для неё в силе. Токены здесь свои и с картой не * пересекаются: у карты base.css, у лендинга этот файл. */ :root { --n-100: #f9f4ed; --n-200: #eee7db; --n-300: #dcd3c4; --n-400: #c0b6a5; --n-500: #a19786; --n-600: #82796a; --n-700: #645c50; --n-800: #474238; --n-900: #2e2b25; --a-200: #ffe1d0; --a-300: #ffc6a5; --a-400: #f6a06b; --a-500: #d67f48; --a-700: #8c491a; --a-900: #402310; --g-200: #e1eecc; --g-300: #ccdbb2; --g-400: #aebf92; --g-800: #3d472b; --g-900: #272e1b; --accent: #c67139; /* Текст на терракотовой заливке: n-900 даёт 3.9:1, AA требует 4.5. */ --on-accent: #140f0b; --radius-md: 16px; --radius-lg: 28px; --shadow-md: 0 3px 10px rgba(20, 16, 10, 0.35); --shadow-lg: 0 12px 32px rgba(20, 16, 10, 0.45); --font-heading: "Rubik", "Onest", system-ui, sans-serif; --font-body: "Onest", system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--n-900); color: var(--n-200); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; color: var(--n-100); letter-spacing: -0.025em; margin: 0; } p { margin: 0; } figure { margin: 0; } img { display: block; max-width: 100%; } a { color: var(--a-300); text-underline-offset: 3px; } a:hover { color: var(--a-200); } :focus-visible { outline: 2px solid var(--a-400); outline-offset: 2px; } ::selection { background: var(--a-700); color: var(--n-100); } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* Состояние выпуска: одна константа data-release на переключает * кнопку тестирования и официальный бейдж Google Play. */ body[data-release="testing"] .only-published { display: none !important; } body[data-release="published"] .only-testing { display: none !important; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); text-decoration: none; } .skip-link:focus-visible { left: 8px; color: var(--on-accent); } /* Шапка */ .site-head { position: sticky; top: 0; z-index: 20; background: rgba(46, 43, 37, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--n-800); } .site-head .wrap { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--n-100); } .brand-mark { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--accent); display: flex; align-items: center; justify-content: center; } .brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; } .head-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--n-800); border-radius: 999px; font-size: 13px; } .lang-switch > * { padding: 5px 11px; border-radius: 999px; } .lang-current { background: var(--n-700); color: var(--n-100); font-weight: 600; } .lang-switch a { color: var(--n-400); text-decoration: none; } .lang-switch a:hover { background: var(--n-700); color: var(--n-100); } .cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; text-decoration: none; } .cta-btn:hover { background: var(--a-400); color: var(--on-accent); } .cta-btn:active { background: var(--a-500); } .cta-btn--lg { padding: 16px 30px; font-size: 16px; } .outline-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--n-600); color: var(--n-100); font-size: 14.5px; font-weight: 600; text-decoration: none; } .outline-btn:hover { background: var(--n-800); border-color: var(--a-400); color: var(--n-100); } /* Герой */ .hero { position: relative; overflow: hidden; } .hero-glow-a, .hero-glow-b { position: absolute; border-radius: 50%; pointer-events: none; } .hero-glow-a { top: -220px; left: -160px; width: 620px; height: 620px; opacity: 0.55; background: radial-gradient(circle at 40% 40%, var(--a-700), transparent 65%); } .hero-glow-b { bottom: -260px; right: -120px; width: 520px; height: 520px; opacity: 0.35; background: var(--g-800); } .hero-inner { position: relative; padding-top: 72px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; } .hero-copy { flex: 1 1 460px; max-width: 600px; } .hero-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-300); } .hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-400); } .hero-title { font-size: clamp(42px, 6.8vw, 74px); line-height: 0.98; margin: 0 0 22px; letter-spacing: -0.035em; } .hero-title em { font-style: normal; color: var(--a-400); } .hero-lead { font-size: 20px; line-height: 1.5; margin: 0 0 32px; max-width: 480px; color: var(--n-300); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 34px; } .hero-note { font-size: 13.5px; line-height: 1.45; max-width: 210px; color: var(--n-400); } .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chips li { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--n-700); font-size: 13px; color: var(--n-200); } .chips .dot { width: 9px; height: 9px; border-radius: 50%; } .dot--p { background: var(--a-400); } .dot--r { background: var(--g-400); } .dot--ctr { background: var(--n-400); } .dot--notam { background: var(--a-300); } .hero-phones { flex: 1 1 400px; display: flex; justify-content: center; } .phones-stage { position: relative; width: 396px; max-width: 100%; height: 560px; } .phone { position: absolute; margin: 0; padding: 9px; background: var(--n-800); border: 1px solid var(--n-700); box-shadow: var(--shadow-lg); } .phone img { object-fit: cover; object-position: top; } .phone--back { left: 0; bottom: 0; border-radius: 32px; transform: rotate(-5deg); } .phone--back img { border-radius: 24px; width: 196px; height: 424px; } .phone--front { right: 0; top: 0; border-radius: 34px; transform: rotate(4deg); } .phone--front img { border-radius: 26px; width: 222px; height: 480px; } .hero-disclaimer { position: relative; max-width: 1120px; margin: 56px auto 0; padding: 18px 24px; border-top: 1px solid var(--n-800); font-size: 13px; line-height: 1.55; color: var(--n-400); } /* Секции */ .section { padding: 84px 0; } .section--alt { background: var(--n-800); } .section-title { font-size: clamp(28px, 3.6vw, 42px); margin: 0 0 12px; } .section-lead { margin: 0 0 44px; max-width: 640px; font-size: 17px; color: var(--n-300); } /* Что делает */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 20px; } .feature-card { padding: 26px; border-radius: var(--radius-lg); background: var(--n-900); border: 1px solid var(--n-700); } .feature-icon { display: flex; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-icon--a { background: var(--a-900); color: var(--a-300); } .feature-icon--g { background: var(--g-900); color: var(--g-300); } .feature-card h3 { font-size: 20px; margin: 0 0 8px; } .feature-card p { font-size: 15px; color: var(--n-300); } /* Скриншоты */ .screens-track { list-style: none; margin: 0 auto; padding: 0 24px 10px; max-width: 1120px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; } .screen-item { flex: none; scroll-snap-align: start; width: 248px; } .screen-frame { padding: 9px; background: var(--n-800); border: 1px solid var(--n-700); border-radius: 30px; box-shadow: var(--shadow-md); } .screen-frame img { border-radius: 22px; width: 228px; height: 494px; object-fit: cover; object-position: top; } .screen-item figcaption { margin-top: 12px; font-size: 13.5px; color: var(--n-300); } /* Откуда данные */ .sources-card { background: var(--n-900); border: 1px solid var(--n-700); border-radius: var(--radius-lg); padding: 8px 22px 18px; overflow-x: auto; } .sources-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14.5px; } .sources-table caption { text-align: left; padding: 14px 0 8px; font-size: 12.5px; color: var(--n-400); } .sources-table th[scope="col"] { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--n-700); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-400); font-weight: 600; } .sources-table td, .sources-table th[scope="row"] { text-align: left; padding: 14px 10px; color: var(--n-300); } .sources-table tbody tr:not(:last-child) > * { border-bottom: 1px solid var(--n-800); } .sources-table th[scope="row"] { font-weight: 600; color: var(--n-100); } .sources-table .date { white-space: nowrap; font-variant-numeric: tabular-nums; } .sources-note { margin: 20px 0 0; font-size: 13.5px; color: var(--n-400); } /* Границы применимости */ .limits-cols { display: flex; flex-wrap: wrap; gap: 48px; } .limits-intro { flex: 1 1 320px; max-width: 420px; } .limits-intro .section-lead { margin-bottom: 22px; } .limits-list { flex: 1 1 440px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .limits-list li { padding: 20px 22px; background: var(--n-800); border-radius: var(--radius-md); } .limits-list strong { display: block; font-family: var(--font-heading); font-size: 16px; margin-bottom: 5px; color: var(--n-100); } .limits-list span { font-size: 15px; color: var(--n-300); } /* Закрытое тестирование */ .testing { padding: 0 0 84px; } .testing-card { position: relative; overflow: hidden; background: var(--n-800); border: 1px solid var(--n-700); border-radius: var(--radius-lg); padding: 44px; display: flex; flex-wrap: wrap; gap: 48px; } .testing-glow { position: absolute; top: -160px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: var(--g-800); opacity: 0.4; pointer-events: none; } .testing-copy { position: relative; flex: 1 1 380px; max-width: 520px; } .testing-badge { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: var(--g-900); color: var(--g-200); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .testing-copy h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 14px; } .testing-copy p { margin: 0 0 12px; font-size: 16px; color: var(--n-300); } .testing-join { position: relative; flex: 1 1 320px; max-width: 420px; } .testing-join h3 { font-size: 19px; margin: 0 0 14px; } .testing-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--n-300); } .testing-list li { display: flex; gap: 11px; } .testing-list .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a-400); margin-top: 8px; } .testing-join .cta-btn { width: 100%; padding: 15px 26px; font-size: 16px; } .testing-fineprint { margin: 12px 0 0; font-size: 13px; color: var(--n-400); } /* Google Play: официальный бейдж появится после публикации. */ .play-badge-slot { display: flex; width: 250px; height: 83px; padding: 10px; border: 2px dashed var(--n-600); border-radius: var(--radius-md); align-items: center; justify-content: center; text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--n-400); } /* Документы */ .docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .doc-card { display: block; padding: 26px; text-decoration: none; color: inherit; background: var(--n-900); border: 1px solid var(--n-700); border-radius: var(--radius-lg); } .doc-card:hover { border-color: var(--a-400); color: inherit; } .doc-card h3 { font-size: 19px; margin: 0 0 7px; } .doc-card p { font-size: 14.5px; color: var(--n-300); } .doc-card .doc-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--a-300); } /* FAQ */ .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-list .section-title { margin-bottom: 36px; } .faq-item { background: var(--n-800); border: 1px solid var(--n-700); border-radius: var(--radius-md); padding: 20px 24px; } .faq-item summary { cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--n-100); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--a-300); } .faq-item p { margin: 12px 0 0; font-size: 15.5px; color: var(--n-300); } /* Подвал */ .site-foot { padding: 56px 0 40px; background: var(--n-800); color: var(--n-300); border-top: 1px solid var(--n-700); } .foot-cols { display: flex; flex-wrap: wrap; gap: 40px; } .foot-about { flex: 1 1 340px; max-width: 520px; } .foot-brand { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--n-100); } .foot-about p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; } .foot-nav { flex: 0 1 200px; } .foot-nav h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; color: var(--n-400); font-family: var(--font-body); } .foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .foot-nav a { color: var(--n-200); } .foot-legal { max-width: 1120px; margin: 36px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--n-700); font-size: 13px; color: var(--n-400); } /* Узкие экраны */ @media (max-width: 640px) { /* Шапка на телефоне не липнет (три ряда съедали пол-экрана), а её CTA * дублирует кнопку героя и прячется. */ .site-head { position: static; } .head-actions .cta-btn { display: none; } } @media (max-width: 480px) { .hero-inner { padding-top: 48px; gap: 36px; } .phones-stage { height: 500px; } .phone--back { left: -12px; } .phone--back img { width: 168px; height: 364px; } .phone--front { right: -6px; } .phone--front img { width: 196px; height: 424px; } .section { padding: 64px 0; } .testing-card { padding: 30px 22px; } .sources-card { padding: 4px 14px 12px; } }